/*!***********************************
*****     Animated Hamburger     *****
*************************************/

@layer component {
  @scope ([data-component-id$=":hamburger-animated"]) {
    /* * */
    --_hamburger-width: var(--sp-6);
    --_hamburger-height: var(--sp-6);
    --_hamburger-line-height: var(--sp-5px);
    --_hamburger-time: var(--speed-300);
    --_hamburger-rotate: 45deg;
    --_hamburger-color: var(--clr-primary-500);
    /* * */
    position: relative;
    width: var(--_hamburger-width);
    height: var(--_hamburger-height);
    cursor: pointer;

    & > div {
      position: absolute;
      width: 100%;
      transition: background-color var(--_hamburger-time);
      transform-origin: center;
      /*border-radius: calc(var(--_hamburger-line-height) / 2);*/
      border-radius: 0;
      background-color: var(--_hamburger-color);
    }
      &:hover > div {
        transition: background-color var(--_hamburger-time);
        --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-primary-300);
        background-color: var(--csstools-light-dark-toggle--0, var(--clr-primary-700));
      }

@supports (color: light-dark(red, red)) {
&:hover > div {
        background-color: light-dark(
          var(--clr-primary-700),
          var(--clr-primary-300)
        );
      }
}

    & .hamburger-top {
      top: 0;
      left: 0;
      height: var(--_hamburger-line-height);
      transform-origin: center;
    }

    & .hamburger-middle {
      top: calc(50% - (var(--_hamburger-line-height) / 2));
      left: 0;
      height: var(--_hamburger-line-height);
    }

    & .hamburger-bottom {
      bottom: 0;
      left: 0;
      height: var(--_hamburger-line-height);
      transform-origin: center;
    }
      &[aria-expanded="false"] .hamburger-top {
        transition:
          transform var(--_hamburger-time),
          top var(--_hamburger-time) var(--_hamburger-time);
        transform: rotate(0deg);
      }

      &[aria-expanded="false"] .hamburger-middle {
        transition: transform var(--_hamburger-time) var(--_hamburger-time);
        transform: scale(1, 1);
      }

      &[aria-expanded="false"] .hamburger-bottom {
        transition:
          transform var(--_hamburger-time),
          bottom var(--_hamburger-time) var(--_hamburger-time);
        transform: rotate(0deg);
      }
      &[aria-expanded="true"] .hamburger-top {
        top: calc(50% - (var(--_hamburger-line-height) / 2));
        transition:
          top var(--_hamburger-time),
          transform var(--_hamburger-time) var(--_hamburger-time);
        transform: rotate(var(--_hamburger-rotate));
      }

      &[aria-expanded="true"] .hamburger-middle {
        transition: transform var(--_hamburger-time);
        transform: scale(0, 1);
      }

      &[aria-expanded="true"] .hamburger-bottom {
        bottom: calc(50% - (var(--_hamburger-line-height) / 2));
        transition:
          bottom var(--_hamburger-time),
          transform var(--_hamburger-time) var(--_hamburger-time);
        transform: rotate(calc(-1 * var(--_hamburger-rotate)));
      }
  }
}