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

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

.pkt-tabs {
  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;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent);
  }
  &__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-normal);
    border-bottom: 0.25rem solid transparent;
    white-space: nowrap;
    @include typography.get-text('pkt-txt-16');

    .pkt-icon,
    pkt-icon {
      --fg-color: currentColor;
    }
    &,
    &:link,
    &:visited,
    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      text-decoration: none !important;
    }

    &.pkt-tabs__item--disabled,
    &:disabled {
      color: var(--pkt-color-text-action-disabled);
      border-bottom-color: transparent;
      cursor: not-allowed;

      &:hover,
      &:focus,
      &:focus-visible,
      &:active {
        color: var(--pkt-color-text-action-disabled);
        border-bottom-color: transparent;
        outline: 0;
      }
    }

    // Prevent disabled tabs from inheriting interactive styles.
    &:not(.pkt-tabs__item--disabled):not(:disabled) {
      &: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,
      &: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');
      }
    }
  }

  &--with-separator {
    .pkt-tabs__list {
      padding-inline-end: 0.25rem;
      align-items: center;
    }

    .pkt-tabs__button,
    .pkt-tabs__link {
      position: relative;
      overflow: visible;
    }

    .pkt-tabs__separator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;

      pointer-events: none;
      user-select: none;
      margin: 0 0.375rem 0.25rem;
    }

    .pkt-tabs__separator img {
      width: 1rem;
      height: 1rem;
      display: block;
    }

    .pkt-tabs__separator-icon {
      font-size: 1.125rem;
      --fg-color: currentColor;
    }
  }

  &__status-icon {
    font-size: 1.125rem;
  }
}