.menu {
  position: relative;
  &:hover {
    .menuTitle {
      text-decoration-color: var(--color-blue);
    }
    .menuDropdown {
      opacity: 1;
      pointer-events: all;
    }
  }
  &:nth-child(1) {
    .menuDropdown {
      left: 0;
      transform: translateX(0);
    }
  }
  &:nth-child(2) {
    .menuDropdown {
      transform: translatex(-25%);
    }
  }
}

.menuTitle {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.5rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 1rem;
  cursor: pointer;
}

.menuDropdown {
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translatex(-50%);
  pointer-events: none;
  &Inner {
    margin-top: 18px;
    display: flex;
    background-color: #282a36;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
  }
}

.menuFeature + .menuColumn,
.menuColumn + .menuFeature,
.menuColumn + .menuColumn {
  border-left: 1px solid rgba(83, 85, 94, 0.5);
}

.menuFeatureItem {
  padding: 16px 24px;
  min-width: 360px;
  & + .menuFeatureItem {
    border-top: 1px solid rgba(83, 85, 94, 0.5);
  }
}

.menuColumn {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 24px 30px;
  svg {
    width: 20px;
    height: 20px;
  }
}

.mobile-menu-default
  input:checked
  + .mobile-menu-default__primary-title-label
  span {
  color: var(--color-blue);
}

.mobileMenu {
  &Group {
    position: relative;
    transition: all 0.3s cubic-bezier(0, 1, 0, 1);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  input:checked {
    & + label {
      color: var(--color-blue);
      div {
        color: var(--color-blue);
      }
      svg {
        transform: rotate(0);
      }
    }
    & ~ .mobileMenuGroup {
      transition: all 0.3s cubic-bezier(1, 0, 1, 0);
      max-height: 9999px;
      pointer-events: all;
      padding-bottom: 24px;
    }
  }
}

.mobileMenuButton {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: none;
  border: 0;
  margin: 0 0 0 15px;
  padding: 0;
  overflow: visible;
  min-width: 0;
  &Box {
    width: 32px;
    height: 27px;
    display: inline-block;
    position: relative;
  }
  &Inner {
    display: block;
    top: 50%;
    margin-top: -2.5px;
    width: 32px;
    height: 5px;
    background-color: var(--color-blue);
    border-radius: 2.5px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    &::before,
    &::after {
      content: '';
      display: block;
      width: 32px;
      height: 5px;
      background-color: var(--color-blue);
      border-radius: 2.5px;
      position: absolute;
    }
    &::before {
      top: -11px;
      transition:
        top 75ms 0.12s ease,
        opacity 75ms ease;
    }
    &::after {
      bottom: -11px;
      transition:
        bottom 75ms 0.12s ease,
        transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    &.active {
      transform: rotate(45deg);
      transition-delay: 0.12s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      &::before {
        top: 0;
        opacity: 0;
        transition:
          top 75ms ease,
          opacity 75ms 0.12s ease;
      }
      &::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition:
          bottom 75ms ease,
          transform 75ms 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }
  }
}