@use '../theme.scss' as *;
@use '../badge.scss' as *;
@use '../button.scss' as *;
@use '../icon.scss' as *;

.tabbable {
  margin-bottom: $block-elem-vertical-gap;
  &.no-border {
    & .tab-content {
      border-bottom: 0;
    }

    & .tabs {
      border-bottom: 0;

      & .tab,
      & .tab:hover {
        border: 0;
        margin: 0;

        &.selected {
          border: 0;
        }
      }
    }
  }
}

.tab-content {
  padding: 0.8em;
}

.tabs {
  display: flex;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;

  &.tab-nav-justified {
    display: flex;
    flex-direction: row;

    & .tab {
      flex: 1;

      & .tab {
        width: 100%;
      }
    }
  }

  & .tab {
    border: 0;

    & > .tab-label {
      border: 0;
      margin-right: 0.5em;
      text-decoration: none;
    }

    & > .tab-label:hover {
      text-decoration: none;
    }

    & > .tab-label:last-child {
      margin-right: 0;
    }
  }
}

.tabs .tab {
  border: 0;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  position: relative;
  margin-right: 0.5em;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  border: 0;
  line-height: 2.9;
  padding: 0 0.75em;
  border-radius: 0;
  min-width: 4em;
  text-align: center;
  box-sizing: border-box;
}

.tabs .tab:last-child {
  margin-right: 0;
}

.tabs .tab.selected,
.tabs .tab.selected:hover,
.tabs .tab.disabled,
.tabs .tab.disabled:hover {
  cursor: default;
}

/* Coloring of normal variant */

.tabs {
  & .tab {
    padding-top: 0.25em;
    color: $tab-nav-tab-color;

    & > a,
    & > a:hover,
    & > a:active,
    & > a:visited {
      color: $tab-nav-tab-color;
      outline: none;
    }

    background-color: $tab-nav-tab-bg-color;
    border-bottom: 3px solid $tab-nav-tab-bg-color;

    &:hover,
    &:focus-visible {
      outline: none;
      background-color: $tab-nav-tab-bg-hover-color;
    }

    & .button {
      height: auto;
      color: $tab-nav-tab-button-label-color;

      &:hover {
        color: $tab-nav-tab-button-label-hover-color;
      }
    }

    &.selected {
      color: $tab-nav-tab-selected-color;

      & .button {
        color: $tab-nav-tab-button-selected-label-color;

        &:hover {
          color: $tab-nav-tab-button-label-hover-color;
        }
      }
    }

    &.selected,
    &.selected:hover {
      color: $tab-nav-tab-selected-color;
      background-color: $tab-nav-tab-bg-selected-color;
      border-bottom: 3px solid $tab-nav-tab-border-selected-color;
    }

    &.disabled,
    &.disabled:hover {
      color: $tab-nav-tab-disabled-color;
      background-color: $tab-nav-tab-bg-disabled-color;
    }
  }
}

/* Uni variant */

.tabs.tab-style-uni .tab,
.tabs.tab-style-uni .tab:hover {
  border: 0;
}

.tabs.tab-style-uni .tab.selected {
  border: 0;
  margin-bottom: -1px;
}

.tabbable.tabs-left,
.tabbable.tabs-right {
  display: flex;
}

/* Tabs left */

.tabbable.tabs-left .tab,
.tabbable.tabs-left .tab:hover {
  margin: 0;
  border-radius: 0;
  border-bottom: 0;
  border-right: 3px solid $tab-nav-tab-bg-color;
}

.tabbable.tabs-left .tab.selected,
.tabbable.tabs-left .tab.selected:hover {
  border-right: 3px solid $tab-nav-tab-border-selected-color;
}

.tabbable.tabs-left .tabs.tab-style-uni {
  border: 0;
}

.tabbable.tabs-left .tabs.tab-style-uni .tab {
  border: 0;
  margin-bottom: 0;
  margin-right: -1px;
}

.tabbable.tabs-left .tabs.tab-style-uni .tab {
  margin-right: 1px;
  border-radius: 0;
}

.tabbable.tabs-left .tabs {
  flex-direction: column;
}

.tabbable.tabs-left .tabs.tab-style-uni .tab.selected,
.tabbable.tabs-left .tabs.tab-style-uni .tab.selected {
  border-right: 0;
}

.tabbable.tabs-left .tab-content {
  display: block;
  border-bottom: 0;
  border: 0;
}

.tabbable.tabs-left .tabs.tab-style-uni {
  border-right: 1px solid $tab-nav-border-color;
}

/* Tabs right */
.tabbable.tabs-right {
  flex-direction: row-reverse;
}

.tabbable.tabs-right .tabs {
  flex-direction: column;
}

.tabbable.tabs-right .tab,
.tabbable.tabs-right .tab:hover {
  margin: 0;
  border-radius: 0;
  border-bottom: 0;
  border-left: 3px solid $tab-nav-tab-bg-color;
}

.tabbable.tabs-right .tab.selected,
.tabbable.tabs-right .tab.selected:hover {
  border-left: 3px solid $tab-nav-tab-border-selected-color;
}



.tabbable.tabs-right .tabs.tab-style-uni {
  border: 0;
}

.tabbable.tabs-right .tabs.tab-style-uni .tab {
  border: 0;
  margin-bottom: 0;
  margin-left: -1px;
}

.tabbable.tabs-right .tabs.tab-style-uni .tab {
  margin-left: 1px;
  border-radius: 0 0 0 0;
}

.tabbable.tabs-right .tabs.tab-style-uni .tab.selected,
.tabbable.tabs-right .tabs.tab-style-uni .tab.selected {
  border-right: 0;
}

.tabbable.tabs-right .tab-content {
  display: block;
  border-bottom: 0;
  border: 0;
}

.tabbable.tabs-right .tabs.tab-style-uni {
  border-left: 1px solid $tab-nav-border-color;
}

/* Coloring of uni variant */

.tabs {
  &.tab-style-uni {
    border-bottom: 1px solid $tab-nav-border-color;

    & .tab {
      padding-top: 0;
      background-color: $tab-nav-tab-bg-color--uni;
      color: $tab-nav-tab-color--uni;

      &:hover,
      &:focus-visible {
        background-color: $tab-nav-tab-bg-hover-color;
        color: $tab-nav-tab-hover-color--uni;
      }

      &.selected {
        background-clip: border-box;
        color: $tab-nav-tab-color-selected--uni;
        border: 1px solid $tab-nav-border-color;
        border-bottom: 1px solid $tab-nav-tab-bg-color--uni;
        border-color: $tab-nav-border-color $tab-nav-border-color
          $tab-nav-tab-bg-color;
        background-color: $tab-nav-tab-bg-selected-color--uni;
      }

      &.disabled,
      &.disabled:hover {
        color: $tab-nav-tab-disabled-color--uni;
        background-color: $tab-nav-tab-bg-disabled-color--uni;
      }
    }
  }
}

.tabbable {
  & .tab-content {
    border-left: 1px solid $tab-nav-border-color;
    border-right: 1px solid $tab-nav-border-color;
    border-bottom: 1px solid $tab-nav-border-color;
    border: 0;
  }

  &.tabs-left {
    & .tabs.tab-style-uni {
      & .tab {
        &.selected {
          border: 1px solid $tab-nav-border-color;
          border-right: 1px solid $tab-nav-tab-bg-color--uni;
        }
      }
    }
  }

  &.tabs-right {
    & .tabs.tab-style-uni {
      & .tab {
        &.selected {
          border: 1px solid $tab-nav-border-color;
          border-left: 1px solid $tab-nav-tab-bg-color--uni;
        }
      }
    }
  }
}