/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/breakpoint" as *;
@use "../../common/resets" as *;

.ams-tabs {
  display: grid;
  gap: var(--ams-tabs-gap);
}

.ams-tabs__list {
  box-shadow: var(--ams-tabs-list-box-shadow);
  display: flex;
  overflow-x: auto;
}

.ams-tabs__button {
  @include reset-button;

  background-color: transparent;
  color: var(--ams-tabs-button-color);
  cursor: var(--ams-tabs-button-cursor);
  display: grid;
  flex-shrink: 0;
  font-family: var(--ams-tabs-button-font-family);
  font-size: var(--ams-tabs-button-font-size);
  font-weight: var(--ams-tabs-button-font-weight);
  line-height: var(--ams-tabs-button-line-height);
  outline-offset: var(--ams-tabs-button-outline-offset);
  padding-block: var(--ams-tabs-button-padding-block);
  padding-inline: var(--ams-tabs-button-padding-inline);

  &:disabled {
    color: var(--ams-tabs-button-disabled-color);
    cursor: var(--ams-tabs-button-disabled-cursor);

    @media (forced-colors: active) {
      color: GrayText;
    }
  }

  &:hover:not([disabled]) {
    color: var(--ams-tabs-button-hover-color);
  }

  &:hover:not([aria-selected="true"], [disabled]) {
    box-shadow: var(--ams-tabs-button-hover-box-shadow);
  }

  &[aria-selected="true"] {
    box-shadow: var(--ams-tabs-button-selected-box-shadow);
    font-weight: var(--ams-tabs-button-selected-font-weight);

    @media (forced-colors: active) {
      background-color: SelectedItem;
    }
  }
}

.ams-tabs__button-label,
.ams-tabs__button-label-hidden {
  grid-area: 1 / 1;
}

// This hidden label is used to prevent a layout shift when the tab is selected
// and the button text becomes bold.
.ams-tabs__button-label-hidden {
  font-weight: var(--ams-tabs-button-selected-font-weight);
  pointer-events: none;
  -webkit-user-select: none;

  /* Safari support is added with the prefixed property. */
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  visibility: hidden;
}

.ams-tabs__panel {
  overflow-x: auto;
}