/* Region tabs */
.ui-tabs__tabs-container {
  position: relative;
}

/* Endregion */
/* Region tabs-header */
.ui-tabs__tabs-header-container {
  height: auto;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding-block: var(--kt-ui-tabs-header-padding-block);
  padding-inline: var(--kt-ui-tabs-header-padding-inline);
  border-radius: var(--kt-ui-tabs-header-border-radius);
  background-color: var(--kt-ui-tabs-header-background);
}

.kt-ui-tabs__tabs-container--with-arrows .ui-tabs__tabs-header-container {
  padding-inline: calc(var(--kt-ui-tabs-header-padding-inline) + var(--kt-ui-tab-arrow-offset));
}

/* Endregion */
/* Region tabs-header arrows */
.kt-ui-tabs__tabs-header-arrow {
  width: var(--kt-ui-tab-arrow-size);
  height: var(--kt-ui-tab-arrow-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  position: sticky;
  z-index: 10;
  border-radius: 50%;
  color: var(--kt-ui-tab-arrow-color);
  border: none;
  background-color: var(--kt-ui-tab-arrow-background);
  cursor: pointer;
}

.kt-ui-tabs__tabs-header-arrow:hover {
  color: var(--kt-ui-tab-arrow-color-hover);
  background-color: var(--kt-ui-tab-arrow-background-hover);
}

.kt-ui-tabs__tabs-header-arrow:active {
  color: var(--kt-ui-tab-arrow-color-active);
  background-color: var(--kt-ui-tab-arrow-background-active);
}

.kt-ui-tabs__tabs-header-arrow[data-direction=left] {
  left: 0;
  margin-right: var(--kt-ui-tab-arrow-offset);
}

.kt-ui-tabs__tabs-header-arrow[data-direction=left]::before,
.kt-ui-tabs__tabs-header-arrow[data-direction=right]::before,
.kt-ui-tabs__tabs-header-arrow[data-direction=left]::after,
.kt-ui-tabs__tabs-header-arrow[data-direction=right]::after {
  content: "";
  display: block;
  position: absolute;
}

.kt-ui-tabs__tabs-header-arrow[data-direction=left]::before,
.kt-ui-tabs__tabs-header-arrow[data-direction=right]::before {
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  top: -8px;
  background-color: var(--kt-ui-tabs-header-background);
}

.kt-ui-tabs__tabs-header-arrow[data-direction=left]::before {
  left: calc(-1 * var(--kt-ui-tab-arrow-offset) - 8px);
}

.kt-ui-tabs__tabs-header-arrow[data-direction=right]::before {
  right: calc(-1 * var(--kt-ui-tab-arrow-offset) - 8px);
}

.kt-ui-tabs__tabs-header-arrow[data-direction=left]::after,
.kt-ui-tabs__tabs-header-arrow[data-direction=right]::after {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--kt-ui-tab-arrow-background);
  border-radius: 50%;
}

.kt-ui-tabs__tabs-header-arrow[data-direction=right] {
  right: 0;
  margin-left: var(--kt-ui-tab-arrow-offset);
}

.kt-ui-tabs__tabs-header-arrow .kt-ui-icon {
  position: relative;
  z-index: 1;
}

/* Endregion */
/* Region tab */
.ui-tabs__tab-header-container {
  height: auto;
  margin: 0;
  padding-block: var(--kt-ui-tab-padding-block);
  padding-inline: var(--kt-ui-tab-padding-inline);
  border-width: var(--kt-ui-tab-border-width);
  border-radius: var(--kt-ui-tab-border-radius);
  font-size: var(--kt-ui-tab-font-size);
  font-weight: var(--kt-ui-tab-font-weight);
  line-height: var(--kt-ui-tab-line-height);
  white-space: nowrap;
  color: var(--kt-ui-tab-color);
  border-color: var(--kt-ui-tab-border-color);
  background-color: var(--kt-ui-tab-background);
  transition-property: color, background-color;
  transition-duration: 160ms;
  transition-timing-function: linear;
}

.ui-tabs__tab-header-container + .ui-tabs__tab-header-container {
  margin-left: var(--kt-ui-tab-offset);
}

.ui-tabs__tab-header-container:hover,
.ui-tabs__tab-header-container.ui-tab-hover {
  color: var(--kt-ui-tab-color-hover);
  border-color: var(--kt-ui-tab-border-color-hover);
  background-color: var(--kt-ui-tab-background-hover);
}

.ui-tabs__tab-header-container:active,
.ui-tabs__tab-header-container.ui-tab-active {
  color: var(--kt-ui-tab-color-active);
  border-color: var(--kt-ui-tab-border-color-active);
  background-color: var(--kt-ui-tab-background-active);
}

.ui-tabs__tab-header-container:focus-visible,
.ui-tabs__tab-header-container.ui-tab-focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--kt-ui-tab-focus-offset-color), 0 0 0 3px var(--kt-ui-tab-focus-main-color);
}

.ui-tabs__tab-header-container.ui-tab-disabled {
  color: var(--kt-ui-tab-color-disabled);
  border-color: var(--kt-ui-tab-border-color-disabled);
  background-color: var(--kt-ui-tab-background-disabled);
}

/* Endregion */
/* Region tab active */
.ui-tabs__tab-header-container.--header-active {
  height: auto;
  font-weight: var(--kt-ui-tab-font-weight-selected);
  color: var(--kt-ui-tab-color-selected);
  border-width: var(--kt-ui-tab-border-width);
  border-color: var(--kt-ui-tab-border-color-selected);
  background-color: var(--kt-ui-tab-background-selected);
}

/* Endregion */
/* Region tab panels */
.ui-tabs__tabs-body-container {
  min-height: var(--kt-ui-tabs-panels-min-height);
  border: var(--kt-ui-tabs-panels-border-width) solid var(--kt-ui-tabs-panels-border-color);
  border-radius: var(--kt-ui-tabs-panels-border-radius);
  background-color: var(--kt-ui-tabs-panels-background);
}

/* Endregion */
/* Region tab panel */
.ui-tabs__tab-body_inner {
  padding-block: var(--kt-ui-tab-panel-padding-block);
  padding-inline: var(--kt-ui-tab-panel-padding-inline);
  border-radius: var(--kt-ui-tabs-panels-border-radius);
}

.ui-tabs__tab-body_inner.ui-tabs__tab-active-animation {
  transition-duration: var(--kt-ui-tab-panel-transition-duration);
}

/* Endregion */
/* Region gray theme */
.ui-tabs__tabs-container.kt-ui-tabs--theme-gray {
  --kt-ui-tabs-header-background: var(--kt-ui-tabs-gray-header-background);
  --kt-ui-tab-focus-offset-color: #edeef0;
  --kt-ui-tab-background: var(--kt-ui-tab-gray-background);
  --kt-ui-tab-background-hover: var(--kt-ui-tab-gray-background-hover);
  --kt-ui-tab-background-active: var(--kt-ui-tab-gray-background-active);
  --kt-ui-tab-background-disabled: var(--kt-ui-tab-gray-background-disabled);
  --kt-ui-tab-background-selected: var(--kt-ui-tab-gray-background-selected);
  --kt-ui-tab-arrow-background: var(--kt-ui-tab-gray-arrow-background);
  --kt-ui-tab-arrow-background-hover: var(--kt-ui-tab-gray-arrow-background-hover);
  --kt-ui-tab-arrow-background-active: var(--kt-ui-tab-gray-arrow-background-active);
}

/* Endregion */
/* Region white theme */
.ui-tabs__tabs-container.kt-ui-tabs--theme-white {
  --kt-ui-tabs-header-background: var(--kt-ui-tabs-white-header-background);
  --kt-ui-tab-focus-offset-color: #ffffff;
  --kt-ui-tab-background: var(--kt-ui-tab-white-background);
  --kt-ui-tab-background-hover: var(--kt-ui-tab-white-background-hover);
  --kt-ui-tab-background-active: var(--kt-ui-tab-white-background-active);
  --kt-ui-tab-background-disabled: var(--kt-ui-tab-white-background-disabled);
  --kt-ui-tab-background-selected: var(--kt-ui-tab-white-background-selected);
  --kt-ui-tab-arrow-background: var(--kt-ui-tab-white-arrow-background);
  --kt-ui-tab-arrow-background-hover: var(--kt-ui-tab-white-arrow-background-hover);
  --kt-ui-tab-arrow-background-active: var(--kt-ui-tab-white-arrow-background-active);
}

/* Endregion */