@import '../settings';
@import '../colours';

.tabs {
  &__header {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    box-shadow: inset 0 -0.1rem 0 0 var(--fr--color-platinum);
    margin-bottom: $global-margin;
    color: var(--fr--color-sapphire-blue);
    font-weight: 600;

    &__item {
      flex: 0 0 auto;
      padding: $global-padding;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      &--bordered {
        border-right: 0.1rem solid var(--fr--color-platinum);
        border-top: 0.1rem solid var(--fr--color-platinum);
        border-radius: 0.2rem 0.2rem 0 0;
        background-color: initial;

        &:first-child {
          border-left: 0.1rem solid var(--fr--color-platinum);
        }
      }

      &--active,
      &:hover,
      &:focus {
        background-color: color(
          from var(--fr--color-pastel-blue) srgb r g b / 0.19
        );
        box-shadow: inset 0 -0.2rem 0 0 var(--fr--color-sea-blue);
      }

      &[aria-disabled='true'] {
        opacity: 0.5;
        user-select: none;
        cursor: not-allowed;
        background-color: initial;
        box-shadow: initial;

        &:active {
          pointer-events: none;
        }
      }
    }
  }
}

@supports (selector(:has(a))) {
  .tabs__header__item:has(> a) {
    padding: 0rem;

    & > a {
      padding: 1rem;
      margin: 1px; // So the focus border is visible
      display: block;
      color: var(--fr--color-sapphire-blue);
    }
  }
}