/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/blocks/animated-menu-button/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
:root {
  --bsaweb--anim-menu-btn--size: 48px;
  --bsaweb--anim-menu-btn--transition-duration: 0.2s;
  --bsaweb--anim-menu-btn--icon--size: 32px;
  --bsaweb--anim-menu-btn--icon--stroke: 2px;
}

.bsab4s-anim-menu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--bsaweb--anim-menu-btn--size);
  height: var(--bsaweb--anim-menu-btn--size);
}

.bsab4s-anim-menu-btn__icon {
  position: relative;
  display: block;
  font-size: var(--bsaweb--anim-menu-btn--icon--size);
  width: 1em;
  height: var(--bsaweb--anim-menu-btn--icon--stroke);
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  transform: scale(1);
}
.bsab4s-anim-menu-btn__icon::before, .bsab4s-anim-menu-btn__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;
  border-radius: inherit;
}

.bsab4s-anim-menu-btn__icon--close {
  background-size: 100% 100%;
  will-change: transform, background-size;
  transition-property: transform, background-size;
  transition-duration: var(--bsaweb--anim-menu-btn--transition-duration, 0.2s);
}
.bsab4s-anim-menu-btn:active .bsab4s-anim-menu-btn__icon--close {
  transform: scale(0.9);
}
.bsab4s-anim-menu-btn__icon--close::before, .bsab4s-anim-menu-btn__icon--close::after {
  will-change: inherit;
  transition: inherit;
}
.bsab4s-anim-menu-btn__icon--close::before {
  transform: translateY(-0.25em) rotate(0);
}
.bsab4s-anim-menu-btn__icon--close::after {
  transform: translateY(0.25em) rotate(0);
}

.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--close {
  background-size: 0% 100%;
}
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--close::before {
  transform: translateY(0) rotate(45deg);
}
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--close::after {
  transform: translateY(0) rotate(-45deg);
}

.bsab4s-anim-menu-btn__icon--arrow-left,
.bsab4s-anim-menu-btn__icon--arrow-right,
.bsab4s-anim-menu-btn__icon--arrow-up,
.bsab4s-anim-menu-btn__icon--arrow-down {
  border-radius: 50em;
  will-change: transform;
  transition-property: transform;
  transition-duration: var(--bsaweb--anim-menu-btn--transition-duration, 0.2s);
}
.bsab4s-anim-menu-btn:active .bsab4s-anim-menu-btn__icon--arrow-left,
.bsab4s-anim-menu-btn:active .bsab4s-anim-menu-btn__icon--arrow-right,
.bsab4s-anim-menu-btn:active .bsab4s-anim-menu-btn__icon--arrow-up,
.bsab4s-anim-menu-btn:active .bsab4s-anim-menu-btn__icon--arrow-down {
  transform: scale(0.9);
}
.bsab4s-anim-menu-btn__icon--arrow-left::before, .bsab4s-anim-menu-btn__icon--arrow-left::after,
.bsab4s-anim-menu-btn__icon--arrow-right::before,
.bsab4s-anim-menu-btn__icon--arrow-right::after,
.bsab4s-anim-menu-btn__icon--arrow-up::before,
.bsab4s-anim-menu-btn__icon--arrow-up::after,
.bsab4s-anim-menu-btn__icon--arrow-down::before,
.bsab4s-anim-menu-btn__icon--arrow-down::after {
  transform-origin: calc(var(--bsaweb--anim-menu-btn--icon--stroke) / 2) 50%;
  will-change: transform, width;
  transition-property: transform, width;
  transition-duration: var(--bsaweb--anim-menu-btn--transition-duration, 0.2s);
}
.bsab4s-anim-menu-btn__icon--arrow-left::before,
.bsab4s-anim-menu-btn__icon--arrow-right::before,
.bsab4s-anim-menu-btn__icon--arrow-up::before,
.bsab4s-anim-menu-btn__icon--arrow-down::before {
  transform: translateY(-0.25em) rotate(0);
}
.bsab4s-anim-menu-btn__icon--arrow-left::after,
.bsab4s-anim-menu-btn__icon--arrow-right::after,
.bsab4s-anim-menu-btn__icon--arrow-up::after,
.bsab4s-anim-menu-btn__icon--arrow-down::after {
  transform: translateY(0.25em) rotate(0);
}

.bsab4s-anim-menu-btn__icon--arrow-right {
  transform: rotate(180deg);
}
.bsab4s-anim-menu-btn:active .bsab4s-anim-menu-btn__icon--arrow-right {
  transform: rotate(180deg) scale(0.9);
}

.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-left::before, .bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-left::after,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-right::before,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-right::after,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-up::before,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-up::after,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-down::before,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-down::after {
  width: 50%;
}
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-left::before,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-right::before,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-up::before,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-down::before {
  transform: translateY(0) rotate(-45deg);
}
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-left::after,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-right::after,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-up::after,
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-down::after {
  transform: translateY(0) rotate(45deg);
}
.bsab4s-anim-menu-btn--state-b:active .bsab4s-anim-menu-btn__icon--arrow-up {
  transform: rotate(90deg) scale(0.9);
}
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-up {
  transform: rotate(90deg);
}
.bsab4s-anim-menu-btn--state-b:active .bsab4s-anim-menu-btn__icon--arrow-down {
  transform: rotate(-90deg) scale(0.9);
}
.bsab4s-anim-menu-btn--state-b .bsab4s-anim-menu-btn__icon--arrow-down {
  transform: rotate(-90deg);
}

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