@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-vertical-tab {
  cursor: pointer;
  padding: $sky-padding-3_4 0 $sky-padding-3_4 $sky-padding;
  margin: $sky-margin-half 0 $sky-margin-half $sky-margin;
  display: flex;
  text-decoration: none;

  &:not(.sky-deemphasized) {
    color: $sky-text-color-default;
  }

  &:hover {
    background-color: $sky-background-color-neutral-light;
  }

  &:focus-visible {
    @include mixins.sky-focus-outline;
  }

  &:hover .sky-vertical-tab-right-arrow {
    color: darken($sky-text-color-icon-borderless, 20%);
  }
}

.sky-vertical-tab-active {
  background-color: $sky-background-color-neutral-light;
  color: $sky-text-color-default;
  padding-left: 6px;
  border-left: $sky-nav-selected-border-width solid $sky-highlight-color-info;
}

.sky-vertical-tab-hidden {
  display: none;
}

.sky-vertical-tab-display {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

.sky-vertical-tab-heading-error {
  padding-left: $sky-padding-half;
}

.sky-vertical-tab-count {
  margin-left: $sky-margin-half;
}

.sky-vertical-tabset-button-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.sky-vertical-tab-right-arrow {
  padding: 3px $sky-padding 0 0;
  color: $sky-text-color-icon-borderless;
}

.sky-vertical-tab-content-pane {
  &:focus-visible {
    outline: none;
    border: none;
  }
}

@include mixins.sky-theme-modern {
  .sky-vertical-tab {
    color: $sky-text-color-deemphasized;
    cursor: pointer;
    padding: $sky-theme-modern-space-sm 0 $sky-theme-modern-space-sm
      $sky-theme-modern-space-md;
    margin: $sky-theme-modern-margin-inline-md 0
      $sky-theme-modern-margin-inline-md $sky-theme-modern-margin-inline-sm;

    &:not(.sky-vertical-tab-active):not(:active):hover {
      color: $sky-text-color-default;
      background-color: transparent;
      padding-left: 14px;
      border-left: 1px solid $sky-highlight-color-info;
    }

    &:not(:active):focus-visible {
      outline: solid 2px $sky-theme-modern-background-color-primary-dark;
      outline-offset: -2px;
      box-shadow: $sky-theme-modern-elevation-3-shadow-size
        $sky-theme-modern-elevation-3-shadow-color;
    }

    &:focus:active:hover {
      outline: none;
      background: none;
    }

    &:active {
      border-left: 4px solid $sky-highlight-color-info;
      color: $sky-text-color-default;
      padding-left: 11px;
    }
    .sky-vertical-tab-heading-error {
      padding-left: $sky-theme-modern-space-sm;
      position: relative;
      top: -2px;
    }
  }
  .sky-vertical-tab-active {
    background: none;
    color: $sky-text-color-default;
    padding-left: 11px;
    border-left: 4px solid $sky-theme-modern-color-blue-74;
  }
}

:host-context(.sky-sectioned-form-tabs-only) {
  .sky-vertical-tab {
    margin-left: 0;
  }
}
