/**
 * @file
 * Mobile button.
 */

.mobile-button {
  align-items: center;
  align-self: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  height: 60px;
  justify-content: center;
  position: relative;
  width: 60px;
}

.mobile-button:focus {
  outline: 2px solid var(--midnight-joshua-tree);
}

.mobile-button:active {
  color: inherit;
}

.mobile-button[aria-expanded="true"] .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.mobile-button[aria-expanded="true"] .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.mobile-button[aria-expanded="true"] .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.mobile-button[aria-expanded="true"] .mobile-button__close {
  display: block;
}

.mobile-button[aria-expanded="true"] .mobile-button__open {
  display: none;
}

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

  .pl .mobile-button {
    display: inline-block;
  }
}

@media (--desktop) {
  .mobile-button {
    display: none;
  }

  .pl .mobile-button {
    display: inline-block;
  }
}

.mobile-button .line {
  fill: none;
  stroke: var(--midnight-joshua-tree);
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-button .line1 {
  stroke-dasharray: 60 207;
}

.mobile-button .line2 {
  stroke-dasharray: 60 60;
}

.mobile-button .line3 {
  stroke-dasharray: 60 207;
}

.mobile-button__icon {
  background-color: var(--ucla-blue);
  display: block;
  height: 3px;
  -webkit-margin-after: var(--size-3);
  margin-block-end: var(--size-3);
  position: relative;
  width: var(--size-8);
}

.mobile-button__icon::before {
  background-color: var(--ucla-blue);
  content: "";
  height: 3px;
  inset-block-start: -8px;
  inset-inline-start: 0;
  position: absolute;
  transition: all 0.2s;
  width: 100%;
}

.mobile-button__icon::after {
  background-color: var(--ucla-blue);
  content: "";
  height: 3px;
  inset-block: auto -8px;
  inset-inline-start: 0;
  position: absolute;
  transition: all 0.2s;
  width: 100%;
}

.mobile-button__text {
  font-size: var(--font-size-0);
  text-transform: uppercase;
}

.mobile-button__close {
  display: none;
}

.mobile-button__open {
  display: block;
}