/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/bp-container/style.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
.bp-panel .block-editor-panel-color-gradient-settings {
  border: none;
}

.bp-panel .components-panel__body:has(.hover-tabs) {
  padding: 0;
  border: none;
}

.bp-color {
  background: var(--bg-resting);
}

.bp-color.resting {
  background: var(--bg-resting);
  color: var(--color-resting);
}
.bp-color.resting .bp-icon {
  color: var(--icon-resting, var(--color-resting));
}

.bp-color.hover::hover {
  background: var(--bg-resting);
}

[positionable] > * {
  --positionable-mobile-x: 0px;
  --positionable-mobile-y: 0px;
}

@media only screen and (min-width: 0) and (max-width: 960px) {
  :is([positionable-mobile*=top], #important),
  :is([positionable-mobile], #important) {
    top: var(--positionable-mobile-y, 0px);
    bottom: unset;
  }
  :is([positionable-mobile*=bottom], #important) {
    bottom: var(--positionable-mobile-y, 0px);
    top: unset;
  }
  :is([positionable-mobile*=left], #important),
  :is([positionable-mobile], #important) {
    left: var(--positionable-mobile-x, 0px);
    right: unset;
  }
  :is([positionable-mobile*=right], #important) {
    right: var(--positionable-mobile-x, 0px);
    left: unset;
  }
  :is([positionable-mobile*=middle], #important) {
    left: calc(50% + var(--positionable-mobile-x, 0px));
    translate: -50% 0;
    right: unset;
  }
  :is([positionable-mobile*=center], #important) {
    top: calc(50% + var(--positionable-mobile-y, 0px));
    translate: 0 -50%;
    bottom: unset;
  }
  :is([positionable-mobile*="center middle"], #important) {
    left: calc(50% + var(--positionable-mobile-x, 0px));
    top: calc(50% + var(--positionable-mobile-y, 0px));
    translate: -50% -50%;
  }
  :is([positionable-mobile*=relative], #important) {
    position: relative;
  }
  :is([positionable-mobile*=absolute], #important) {
    position: absolute;
  }
  :is([positionable-mobile*=sticky], #important) {
    position: sticky;
  }
  :is([positionable-mobile*=static], #important) {
    position: static;
  }
}
@media only screen and (min-width: 961px) {
  :is([positionable*=top], #important),
  :is([positionable], #important) {
    top: var(--positionable-desktop-y, 0px);
    bottom: unset;
  }
  :is([positionable*=bottom], #important) {
    bottom: var(--positionable-desktop-y, 0px);
    top: unset;
  }
  :is([positionable*=left], #important),
  :is([positionable], #important) {
    left: var(--positionable-desktop-x, 0px);
    right: unset;
  }
  :is([positionable*=right], #important) {
    right: var(--positionable-desktop-x, 0px);
    left: unset;
  }
  :is([positionable*=middle], #important) {
    left: calc(50% + var(--positionable-desktop-x, 0px));
    translate: -50% 0;
    right: unset;
  }
  :is([positionable*=center], #important) {
    top: calc(50% + var(--positionable-desktop-y, 0px));
    translate: 0 -50%;
    bottom: unset;
  }
  :is([positionable*="center middle"], #important) {
    left: calc(50% + var(--positionable-desktop-x, 0px));
    top: calc(50% + var(--positionable-desktop-y, 0px));
    translate: -50% -50%;
  }
  :is([positionable*=relative], #important) {
    position: relative;
  }
  :is([positionable*=absolute], #important) {
    position: absolute;
  }
  :is([positionable*=sticky], #important) {
    position: sticky;
  }
  :is([positionable*=static], #important) {
    position: static;
  }
}
/* @group sizeable
------------------------------------ */
@media only screen and (min-width: 961px) {
  .sizeable,
  [sizeable] {
    width: var(--desktop-w);
    height: var(--desktop-h);
  }
  .sizeable > *,
  [sizeable] > * {
    --desktop-w: unset;
    --desktop-h: unset;
  }
}
@media only screen and (min-width: 0) and (max-width: 960px) {
  .sizeable,
  [sizeable] {
    width: var(--mobile-w);
    height: var(--mobile-h);
  }
  .sizeable > *,
  [sizeable] > * {
    --mobile-w: unset;
    --mobile-h: unset;
  }
}
/* @end */
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.5rem;
  max-width: 35rem;
  justify-content: center;
  align-items: center;
}

.icon-button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
  transition: 0.2s;
}

.icon-button.active {
  background: black;
  border-radius: 4px;
  color: white;
}

.container {
  width: 100%;
}

/*# sourceMappingURL=style-index.css.map*/