.ty-tabs {
  position: relative;
  font-size: var(--ty-tabs-font-size, var(--ty-font-size-base));
  color: var(--ty-tabs-color, var(--ty-color-text));
}
.ty-tabs__nav {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: var(--ty-tabs-nav-margin, 16px);
}
.ty-tabs__nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
}
.ty-tabs__nav-wrap {
  position: relative;
  overflow: hidden;
  flex: 1;
}
.ty-tabs__nav-list {
  display: flex;
  position: relative;
  transition: transform 0.3s;
}
.ty-tabs__tab {
  display: flex;
  align-items: center;
  padding: var(--ty-tabs-tab-padding-block-md, 12px) 0;
  margin: 0 var(--ty-tabs-tab-gap, 32px) 0 0;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--ty-tabs-tab-color, var(--ty-color-text));
  transition: color 0.3s;
}
.ty-tabs__tab:hover {
  color: var(--ty-tabs-tab-hover-color, var(--ty-color-primary-text-hover));
}
.ty-tabs__tab_active {
  color: var(--ty-tabs-tab-active-color, var(--ty-color-primary));
  font-weight: var(--ty-tabs-tab-active-font-weight, 500);
}
.ty-tabs__tab_disabled {
  color: var(--ty-tabs-tab-disabled-color, var(--ty-color-text-quaternary));
  cursor: not-allowed;
}
.ty-tabs__tab_disabled:hover {
  color: var(--ty-tabs-tab-disabled-color, var(--ty-color-text-quaternary));
}
.ty-tabs__tab-icon {
  margin-right: var(--ty-tabs-icon-gap, 8px);
}
.ty-tabs__tab-remove {
  margin-left: var(--ty-tabs-remove-gap, 8px);
  font-size: var(--ty-tabs-remove-font-size, 12px);
  color: var(--ty-tabs-remove-color, var(--ty-color-text-tertiary));
  cursor: pointer;
  transition: color 0.3s;
}
.ty-tabs__tab-remove:hover {
  color: var(--ty-tabs-remove-color-hover, var(--ty-color-text));
}
.ty-tabs__ink-bar {
  position: absolute;
  bottom: 0;
  height: var(--ty-tabs-ink-bar-height, 2px);
  background: var(--ty-tabs-ink-bar-color, var(--ty-color-primary));
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: none;
}
.ty-tabs__content {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.ty-tabs__content-inner {
  display: flex;
  width: 100%;
}
.ty-tabs__content-inner_animated {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ty-tabs__content-inner_static {
  display: block;
}
.ty-tabs__panel {
  flex-shrink: 0;
  width: 100%;
  opacity: 0;
  height: 0;
  overflow: hidden;
  outline: none;
}
.ty-tabs__panel_active {
  opacity: 1;
  height: auto;
}
.ty-tabs__nav-prev, .ty-tabs__nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ty-tabs-nav-button-size, 32px);
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--ty-tabs-nav-button-font-size, 16px);
  color: var(--ty-tabs-nav-button-color, var(--ty-color-text-tertiary));
  transition: color 0.3s;
  flex-shrink: 0;
}
.ty-tabs__nav-prev:hover, .ty-tabs__nav-next:hover {
  color: var(--ty-tabs-nav-button-color-hover, var(--ty-color-text));
}
.ty-tabs__nav-btn_disabled {
  color: var(--ty-tabs-nav-button-color-disabled, var(--ty-color-text-quaternary));
  cursor: not-allowed;
}
.ty-tabs__nav-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ty-tabs-add-size, 32px);
  height: var(--ty-tabs-add-size, 32px);
  background: transparent;
  border: 1px dashed var(--ty-tabs-add-border-color, var(--ty-color-border));
  border-radius: var(--ty-tabs-add-radius, 4px);
  cursor: pointer;
  font-size: var(--ty-tabs-add-font-size, 14px);
  color: var(--ty-tabs-add-color, var(--ty-color-text-tertiary));
  margin-left: var(--ty-tabs-add-margin, 4px);
  flex-shrink: 0;
  transition: all 0.3s;
}
.ty-tabs__nav-add:hover {
  color: var(--ty-tabs-add-color-hover, var(--ty-color-primary));
  border-color: var(--ty-tabs-add-border-color-hover, var(--ty-color-primary));
}
.ty-tabs__nav-extra_left, .ty-tabs__nav-extra_right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ty-tabs__nav-extra_left {
  margin-right: var(--ty-tabs-extra-gap, 16px);
}
.ty-tabs__nav-extra_right {
  margin-left: var(--ty-tabs-extra-gap, 16px);
}
.ty-tabs_sm .ty-tabs__tab {
  padding: var(--ty-tabs-tab-padding-block-sm, 8px) 0;
  font-size: var(--ty-tabs-size-sm, 13px);
}
.ty-tabs_lg .ty-tabs__tab {
  padding: var(--ty-tabs-tab-padding-block-lg, 16px) 0;
  font-size: var(--ty-tabs-size-lg, 15px);
}
.ty-tabs_card .ty-tabs__tab, .ty-tabs_editable-card .ty-tabs__tab {
  padding: var(--ty-tabs-card-padding-block, 8px) var(--ty-tabs-card-padding-inline, 16px);
  margin: 0;
  background: var(--ty-tabs-card-bg, var(--ty-color-fill));
  border: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
  border-bottom: none;
  border-radius: var(--ty-tabs-card-radius, 4px) var(--ty-tabs-card-radius, 4px) 0 0;
  transition: all 0.3s;
}
.ty-tabs_card .ty-tabs__tab + .ty-tabs__tab, .ty-tabs_editable-card .ty-tabs__tab + .ty-tabs__tab {
  margin-left: var(--ty-tabs-card-gap, 2px);
}
.ty-tabs_card .ty-tabs__tab_active, .ty-tabs_editable-card .ty-tabs__tab_active {
  background: var(--ty-tabs-card-active-bg, var(--ty-color-bg-container));
  border-bottom-color: var(--ty-tabs-card-active-bg, var(--ty-color-bg-container));
}
.ty-tabs_card .ty-tabs__ink-bar, .ty-tabs_editable-card .ty-tabs__ink-bar {
  display: none;
}
.ty-tabs_editable-card .ty-tabs__tab {
  padding-right: var(--ty-tabs-card-padding-inline-editable-end, 8px);
}
.ty-tabs_centered .ty-tabs__nav-list {
  justify-content: center;
}
.ty-tabs_bottom .ty-tabs__nav {
  margin-bottom: 0;
  margin-top: var(--ty-tabs-nav-margin, 16px);
}
.ty-tabs_bottom .ty-tabs__nav::before {
  top: 0;
  bottom: auto;
}
.ty-tabs_bottom .ty-tabs__ink-bar {
  top: 0;
  bottom: auto;
}
.ty-tabs_left, .ty-tabs_right {
  display: flex;
}
.ty-tabs_left .ty-tabs__nav, .ty-tabs_right .ty-tabs__nav {
  flex-direction: column;
  margin-bottom: 0;
}
.ty-tabs_left .ty-tabs__nav::before, .ty-tabs_right .ty-tabs__nav::before {
  inset: 0 0 0 auto;
  border-bottom: none;
  border-right: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
}
.ty-tabs_left .ty-tabs__nav-wrap, .ty-tabs_right .ty-tabs__nav-wrap {
  flex: none;
}
.ty-tabs_left .ty-tabs__nav-list, .ty-tabs_right .ty-tabs__nav-list {
  flex-direction: column;
}
.ty-tabs_left .ty-tabs__tab, .ty-tabs_right .ty-tabs__tab {
  margin: 0;
  padding-right: var(--ty-tabs-tab-gap, 32px);
}
.ty-tabs_left .ty-tabs__ink-bar, .ty-tabs_right .ty-tabs__ink-bar {
  width: var(--ty-tabs-ink-bar-height, 2px);
  height: auto;
  top: 0;
  right: 0;
  bottom: auto;
}
.ty-tabs_left .ty-tabs__content {
  padding-left: var(--ty-tabs-nav-margin, 16px);
}
.ty-tabs_right {
  flex-direction: row-reverse;
}
.ty-tabs_right .ty-tabs__nav::before {
  right: auto;
  left: 0;
  border-right: none;
  border-left: 1px solid var(--ty-tabs-border, var(--ty-color-fill-tertiary));
}
.ty-tabs_right .ty-tabs__content {
  padding-right: var(--ty-tabs-nav-margin, 16px);
}
.ty-tabs_right .ty-tabs__ink-bar {
  right: auto;
  left: 0;
}