/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/modal-open-dbd/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
green: #3FAF82

*/
.wp-block-flashblocks-modal-open-dbd {
  cursor: pointer;
  --width: calc(var(--line-gap) + var(--line-width));
  border: 0;
  background: var(--bg-color);
}
.wp-block-flashblocks-modal-open-dbd > div > div {
  position: relative;
  height: var(--line-width);
  background: var(--line-color);
}
.wp-block-flashblocks-modal-open-dbd > div div:nth-child(2),
.wp-block-flashblocks-modal-open-dbd > div div:nth-child(3) {
  margin-top: var(--line-gap);
}
.wp-block-flashblocks-modal-open-dbd.is-open > div div:nth-child(1) {
  animation: top 0.6s ease forwards;
}
.wp-block-flashblocks-modal-open-dbd.is-open > div div:nth-child(2) {
  animation: mid 0.6s ease forwards;
}
.wp-block-flashblocks-modal-open-dbd.is-open > div div:nth-child(3) {
  animation: bottom 0.6s ease forwards;
}
.wp-block-flashblocks-modal-open-dbd.is-close > div div:nth-child(1) {
  animation: top-2 0.6s ease forwards;
}
.wp-block-flashblocks-modal-open-dbd.is-close > div div:nth-child(2) {
  animation: mid-2 0.6s ease forwards;
}
.wp-block-flashblocks-modal-open-dbd.is-close > div div:nth-child(3) {
  animation: bottom-2 0.6s ease forwards;
}
@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: var(--width);
    transform: rotate(0);
  }
  100% {
    top: var(--width);
    transform: rotate(45deg);
  }
}
@keyframes mid {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: var(--width);
    transform: rotate(0);
  }
  100% {
    bottom: var(--width);
    transform: rotate(135deg);
  }
}
@keyframes top-2 {
  0% {
    top: var(--width);
  }
  50% {
    top: var(--width);
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}
@keyframes mid-2 {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes bottom-2 {
  0% {
    bottom: var(--width);
    transform: rotate(135deg);
  }
  50% {
    bottom: var(--width);
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

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