@use "sass:math";
@use "core/colors";
@use "core/mq";
@use "s360-toolkit";

$_toggle-height: 19;
$_toggle-width: 44;
$_span-height: 2;

.menu-toggle {
  --button-font-size: 1rem;

  width: s360-toolkit.em($_toggle-width);
  height: s360-toolkit.em($_toggle-height);
  position: relative;
  outline: none;
  z-index: 101;
  margin-top: calc(#{ s360-toolkit.rem($_span-height) } * -1);
  top: -6px;

  span {
    display: block;
    background-color: var(--menu-toggle-span-background-color);
    width: 100%;
    height: s360-toolkit.em($_span-height);
    position: absolute;
    left: 0;
    transition: all 200ms ease-in-out;
    border-radius: s360-toolkit.em($_toggle-height);

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: calc(50%);
    }

    &:nth-child(3) {
      top: calc(100%);
    }
  }

  &:hover,
  &:focus {
    span {
      &:nth-child(1) {
        transform: translateY(s360-toolkit.em($_span-height));
      }

      &:nth-child(3) {
        transform: translateY(s360-toolkit.em(-$_span-height));
      }
    }
  }

  &[aria-expanded="true"] {
    span {
      &:nth-child(1) {
        transform: translate(0, s360-toolkit.em(math.div($_toggle-height, 2))) rotate(45deg);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: translate(0, s360-toolkit.em(math.div(-$_toggle-height, 2))) rotate(-45deg);
      }
    }
  }

  // **************************************************
  // MEDIA QUERIES

  @media (min-width: mq.$mq-1280) {
    --button-display: none;
  }
}
