@use '../utils/color_variables';
@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

// This file defines the style for .tabs-container, .tabs and .tab

.page-header + .tabs-container {
  box-shadow: none;
}

.tabs {
  align-items: stretch;
  box-shadow: inset 0 -1px 0 color_variables.$grey-light;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  overflow-x: auto;
  user-select: none;
  white-space: nowrap;

  ul {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    min-height: 3rem;

    > a {
      &:focus {
        box-shadow: none;
      }
      &.active {
        border-color: color_variables.$blue;
        color: color_variables.$blue;
      }
    }
    li {
      // solves for tools -> sub-tabs like "Unwrap data" -> "Data"
      &.is-active {
        border-bottom: 2px solid color_variables.$blue;
        color: color_variables.$blue;
      }
      // solves for tabs on auth mounts & secrets engines
      > a {
        &.active {
          color: color_variables.$blue;
          background-color: transparent;
          border-bottom: 2px solid color_variables.$blue;
        }
      }
    }
  }

  li {
    &:focus {
      box-shadow: none;
    }
    &.active a,
    &.is-active a {
      border-color: color_variables.$blue;
      color: color_variables.$blue;
    }
  }
  // important for auth tabs in active state, otherwise the border-bottom will not show.
  a {
    align-items: center;
    display: flex;
    justify-content: center;
    vertical-align: top;
    border-bottom: 2px solid transparent;
    color: color_variables.$grey;
    font-weight: font_variables.$font-weight-semibold;
    padding: size_variables.$spacing-14 size_variables.$spacing-12 size_variables.$spacing-12;
    text-decoration: none;
    transition:
      background-color size_variables.$speed,
      border-color size_variables.$speed;

    &:hover,
    &:active {
      border-color: color_variables.$grey-light;
    }

    &:hover {
      background-color: color_variables.$ui-gray-050;
      color: color_variables.$grey-darkest;
    }
  }

  .ember-basic-dropdown-trigger {
    outline: none;
  }
}