@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/ring.less";

.np-navigation-option {
  text-decoration: none;
  .border(left, 0);

  .border(right, 0);

  background-color: transparent;
  .text-align(left);

  width: 100%;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  &:not(.disabled, :disabled):hover {
    .tw-avatar__content {
      background-color: var(--color-background-screen);
    }
  }

  .np-theme-personal & {
    &:not(.disabled, :disabled):hover {
      .tw-avatar__content {
        background-color: var(--color-background-neutral);
      }
    }
  }

  & .circle {
    border: none;
  }

  .focus-ring();
  .ring-offset-0();

  .np-theme-personal & {
    text-decoration: none;
  }
}

.np-navigation-option__chevron {
  padding: 0;
  border: none;
  outline: none;
  background: none;

  &:not(.disabled, :disabled):hover,
  &:not(.disabled, :disabled):focus {
    color: var(--color-content-accent-hover);
  }

  &:not(.disabled, :disabled):active {
    color: var(--color-content-accent-active);
  }
}

.np-option__container-aligned {
  .np-theme-personal & {
    width: calc(100% + 2 * var(--space-content-horizontal));
  }
}