// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:map';
@use 'sass:math';

.#{$prefix}-tabs {
  background-color: $color-white-base;
  border: 1px solid $color-black-100;
  border-radius: $spacing-xs;

  &__tablist {
    display: flex;
    flex-wrap: wrap;
  }

  &__tab {
    border: none;
    background-color: transparent;
    border-bottom: 1px solid $color-black-100;
    color: $color-black-500;
    cursor: pointer;
    flex-grow: 1;
    line-height: 1;
    padding: $spacing-sm $spacing-sm;
    position: relative;
    z-index: map.get($z-index, '100');

    &:not(:first-child) {
      border-left: 1px solid $color-black-100;

      // Fixes double border when tabs wrap on to multiple lines
      margin-left: -1px;
    }

    &:hover {
      background-color: $color-blue-000;
      color: $color-blue-500;
    }

    &:hover::after {
      background-color: $color-blue-500;
      bottom: 0;
      content: '';
      display: block;
      height: $spacing-xxs;
      left: 0;
      position: absolute;
      width: 100%;
    }

    &:focus {
      outline: math.div($spacing-xxs, 2) solid $color-blue-400;
      outline-offset: math.div($spacing-xxs, 2);
      background-color: $color-blue-000;
    }

    &:focus:not(:focus-visible) {
      outline: none;
    }
  }

  &__tab[aria-selected='true'] {
    background-color: $color-orange-000;
  }

  &__tab[aria-selected='true']:hover {
    color: $color-black-500;
  }

  &__tab[aria-selected='true']::after {
    bottom: 0;
    background-color: $color-crimson-500;
    content: '';
    display: block;
    height: $spacing-xxs;
    left: 0;
    position: absolute;
    width: 100%;
  }

  &__panel {
    padding: $spacing-sm;

    &:focus {
      outline: math.div($spacing-xxs, 2) solid $color-blue-500;
      outline-offset: math.div($spacing-xxs, 2) * -1;
    }

    &:focus:not(:focus-visible) {
      outline: none;
    }
  }
}