/**
  @prop --fw-tab-border-block-end: border bottom style of tab
*/

:host(:focus-visible) {
  outline: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px $color-azure-800;
  border: none;
  padding-block-end: 0;

  .tab.active {
    border-block-end: none;
  }
}

.tab {
  display: inline-flex;
  white-space: nowrap;
  cursor: pointer;
  align-items: center;
  padding-inline: 8px;
  padding-block: 10px;
  line-height: 20px;
  color: $color-smoke-700;
  font-size: $font-size-14;
  font-weight: $font-weight-400;
  margin-inline: 4px;
  margin-block: 0;

  /* stylelint-disable */
  &:hover:not(.disabled) {
    padding-block-end: 8px;
    border-block-end: var(
      --fw-tab-border-block-end,
      2px solid $color-smoke-300
    );
  }

  &.active:not(.disabled) {
    padding-block-end: 8px;
    border-block-end: 2px solid $color-azure-800;
    color: $color-azure-800;
    font-weight: $font-weight-600;
  }

  &.disabled {
    cursor: not-allowed;
    color: $color-smoke-300;
  }

  &:focus,
  &:focus-visible {
    outline: none;
  }
}

::slotted(a) {
  text-decoration: none;
  color: $color-smoke-700;
}
