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

@transition-timing-function: ease-in-out;
@short-transition-duration: 0.15s;
@line-thickness: 2px;

.tabs {
  position: relative;

  &__tab {
    display: inline-block;
    outline: none;
    text-align: center;
    padding: var(--size-8);
    margin-bottom: -@line-thickness;
    color: var(--color-content-primary);
    font-weight: var(--font-weight-semi-bold);
    transition: color @short-transition-duration @transition-timing-function;

    .np-theme-personal & {
      color: var(--color-content-secondary);
      font-weight: var(--font-weight-regular);
    }

    &--selected {
      color: var(--color-content-accent);

      .np-theme-personal & {
        color: var(--color-interactive-primary);
        font-weight: var(--font-weight-semi-bold);
      }
    }

    &__content {
      border-radius: 2px;
    }

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

      .np-theme-personal & {
        color: var(--color-interactive-primary-hover);
        .ring();
      }
    }

    // Show hover style for all large screens (to account for the fact that IE does not support the below property)
    @media (--screen-lg) {
      &:not(.disabled, :disabled):hover {
        color: var(--color-content-accent-hover);

        .np-theme-personal & {
          color: var(--color-interactive-primary-hover);
        }
      }
    }

    // Otherwise, if this query is supported, show hover style for any client that supports :hover
    @media (hover: hover) {
      &:not(.disabled, :disabled):hover {
        color: var(--color-content-accent-hover);

        .np-theme-personal & {
          color: var(--color-interactive-primary-hover);
        }
      }
    }
  }

  &__tab-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border-neutral);
  }

  &__line {
    height: @line-thickness;
    background-color: var(--color-interactive-accent);
    transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
    position: relative;
    bottom: -1px;

    .np-theme-personal & {
      background-color: var(--color-interactive-primary);
    }
  }

  &__panel-container {
    width: 100%;
  }

  &__slider {
    display: flex;
  }

  &__panel {
    &--selected {
      padding: var(--size-8);
    }

    &.enter {
      opacity: 0;
    }

    &.enter-active {
      opacity: 1;
    }

    &.exit {
      opacity: 0;
    }
  }

  &--inverse &__tab-list {
    border-bottom-color: var(--color-border-neutral);
  }

  &--inverse &__tab:not(.tabs__tab--selected) {
    color: #fff;
  }

  &.tabs--auto-width .tabs__tab {
    display: inline-flex;
    min-height: var(--size-40);
    padding: 0 var(--size-12);
    justify-content: center;
    align-items: center;
    vertical-align: middle;
  }

  @media (--screen-sm) {
    &.tabs--auto-width .tabs__tab {
      padding: 0 var(--size-24);
    }
  }
}