@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/typography';

pkt-tabs,
pkt-tab-item {
  display: block;
}

.pkt-tabs {
  --pkt-tabs-bg: var(--pkt-color-background-default);
  background-color: var(--pkt-tabs-bg);
  position: relative;
  border-bottom: 1px solid var(--pkt-color-border-gray);
  &__list {
    position: relative;
    width: auto;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0.25rem 4rem 0 0.25rem;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  &__button {
    border: 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }
  &__link,
  &__button {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--pkt-color-text-action-disabled);
    border-bottom: 0.25rem solid transparent;
    white-space: nowrap;
    @include typography.get-text('pkt-txt-16');

    .pkt-icon,
    pkt-icon {
      --fg-color: currentColor;
    }
    &,
    &:hover,
    &:active {
      text-decoration: none;
    }
    &:focus:not(:active),
    &:focus-visible:not(:active) {
      border: 0;
      box-shadow: none;
      background-color: var(--pkt-tabs-bg);
      outline: 0.25rem solid var(--pkt-color-border-states-focus);
      outline-offset: 0;
    }
    &.active:focus,
    &.active:focus-visible {
      box-shadow: none;
      border-bottom: 0.25rem solid var(--pkt-color-border-blue);
    }
    &:hover,
    &:focus,
    &:focus-visible,
    &:focus-visible:is(:active),
    &:focus:is(:active),
    &:active {
      outline: 0;
      color: var(--pkt-color-text-action-active);
      border-bottom: 0.25rem solid var(--pkt-color-border-states-hover);
    }
    &.active {
      color: var(--pkt-color-text-action-normal);
      border-bottom: 0.25rem solid var(--pkt-color-border-blue);
      @include typography.get-text('pkt-txt-16-medium');
    }
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 3;
    background: linear-gradient(90deg, transparent 0%, var(--pkt-tabs-bg) 100%);
    top: 0;
    right: 0;
    bottom: 0;
    width: 5rem;
    pointer-events: none;
  }
}