@import '../../../../../scss/styles.scss';

.doc-tab {
  @extend %h5;
  position: relative;

  &__link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;

    // Use a pseudo element for the accessability so that it doesn't take up DOM space
    // Also because the parent element has `overflow: hidden` which would clip an outline
    &:focus-visible::after {
      content: '';
      border: var(--accessibility-outline);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }
  }

  &:focus:not(:focus-visible) {
    opacity: 1;
  }

  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background-color: var(--theme-elevation-50);
    opacity: 0;
  }

  &:hover {
    &::before {
      opacity: 1;
    }

    .doc-tab__count {
      background-color: var(--theme-elevation-150);
    }
  }

  &--active {
    &::before {
      opacity: 1;
      background-color: var(--theme-elevation-100);
    }

    .doc-tab {
      &__count {
        background-color: var(--theme-elevation-250);
      }
    }

    &:hover {
      .doc-tab {
        &__count {
          background-color: var(--theme-elevation-250);
        }
      }
    }
  }

  &__label {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: calc(var(--base) / 2) calc(var(--base));
  }

  &__count {
    padding: 0px 7px;
    background-color: var(--theme-elevation-100);
    border-radius: 1px;
  }
}