/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./components/block/Accordion/style.css ***!
  \******************************************************************************************************************************************************************************************/
/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 * @link: https://github.com/postcss/postcss-custom-media
 **/

/* Min-Width */

/* Customize based on project */

/* Max-Width */

/* Customize based on project */

/* Min-Max-Width */

[name='Accordion'] + [name='Accordion'] {
    margin-block-start: 24px;
  }

[name='Accordion'] .header {
    margin: 0;
  }

[name='Accordion'] .header .toggle {
      align-items: center;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0;
      text-align: left;
    }

[name='Accordion'] .header .toggle.is-open .icon svg {
            transform: rotateX(180deg);
          }

[name='Accordion'] .header .toggle.is-open .icon[data-icon-type='plus-minus'] svg {
            transform: rotate(45deg);
          }

[name='Accordion'] .header .toggle.is-open .title {
          font-weight: var(--fw-bold);
        }

[name='Accordion'] .header .toggle:not(.is-open):hover .title, [name='Accordion'] .header .toggle:not(.is-open):focus-visible .title {
            font-weight: var(--fw-bold);
          }

[name='Accordion'] .header .toggle:focus-visible {
        outline: 2px solid var(--clr-primary);
        outline-offset: 2px;
      }

[name='Accordion'] .header .title {
      flex: 1;
      font-size: var(--fs, 16px);
      font-weight: var(--fw-medium);
      line-height: var(--lh, 24px);
      padding-right: 1rem;
      transition: font-weight var(--transition-duration, 0.3s)
        var(--transition-timing-function, ease);
    }

@media screen and (width >= 1280px) {

[name='Accordion'] .header .title {
        --fs: 18px;
        --lh: 24px
    }
      }

[name='Accordion'] .header .icon {
      color: var(--clr-primary);
      flex-shrink: 0;
      height: 24px;
      position: relative;
      width: 24px;
    }

[name='Accordion'] .header .icon svg {
        transition: transform var(--transition-duration, 0.3s)
          var(--transition-timing-function, ease);
        height: 100%;
        width: 100%;
      }

/* Plus/Minus icon specific styles */

[name='Accordion'] .header .icon[data-icon-type='plus-minus'] svg {
        transition: transform 0.3s ease;
      }

[name='Accordion'] .panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
  }

[name='Accordion'] .panel.is-open {
      grid-template-rows: 1fr;
    }

/* For animated panels */

[name='Accordion'] .panel[style*='height'] {
      display: block;
      overflow: hidden;
    }

[name='Accordion'] .content > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

[name='Accordion'] .content > :last-child:not([class*='button']) {
    margin-block-end: 0;
    padding-block-end: 0;
  }

[name='Accordion'] .content > h2,
  [name='Accordion'] .content > h3,
  [name='Accordion'] .content > h4,
  [name='Accordion'] .content > h5,
  [name='Accordion'] .content > h6 {
    margin-block-start: 0;
  }

[name='Accordion'] .content {

    overflow: hidden;
    padding-block: 0;
    transition: padding var(--transition-duration, 0.3s)
      var(--transition-timing-function, ease);
}

[name='Accordion'][data-open='true'] .toggle .icon svg {
        transform: rotateX(180deg);
      }

[name='Accordion'][data-open='true'] .toggle .icon[data-icon-type='plus-minus'] svg {
        transform: rotate(45deg);
      }

[name='Accordion'][data-open='true'] .content {
      padding-block: calc(var(--box-padding, 1rem) * 0.5) 0;
    }

/* Anchor link highlight */

[name='Accordion']:target .toggle {
      animation: highlight 2s ease;
    }

@keyframes highlight {
  0%,
  100% {
    background-color: transparent;
  }

  50% {
    background-color: rgba(var(--clr-primary-rgb), 0.1);
  }
}


/*# sourceMappingURL=style.min.css.map*/