:host {
  display: contents;
}

// Mobile dropdown wrapper
.mobile-dropdown-wrapper {
  position: relative;
}

// Mobile dropdown
.mobile-dropdown {
  position: absolute;
  display: flex;
  transition: var(--transition-standard);
  top: 100%;
  flex-direction: column;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;

  &.isVisible {
    pointer-events: all;
  }

  button {
    transition: var(--transition-standard);
    transform: translateY(-100%);
    opacity: 0;
    position: relative;
    z-index: 2;
    margin-top: var(--s);
    margin-left: 0;

    @for $i from 2 through 7 {
      &:nth-child(#{$i}) {
        transform: translateY(#{$i * -100%});
      }
    }
  }

  &.isVisible button {
    transform: translateY(0);
    opacity: 1;
  }
}

// Active button styles
button.active {
  background-color: var(--sidenav-bg);

  &.isCustomized {
    background-color: var(--c-accent);
  }
}
