/* TABS */
.o-ui-tabs {
    height: max-content;
}

/* TABS | ORIENTATION | VERTICAL */
.o-ui-tabs-vertical {
    display: flex;
}

/* TAB LIST */
.o-ui-tab-list {
    display: flex;
}

/* TAB LIST | ORIENTATION | HORIZONTAL */
.o-ui-tabs-horizontal .o-ui-tab-list {
    border-bottom: 2px solid var(--o-ui-alias-border-2);
}

/* TAB LIST | ORIENTATION | VERTICAL */
.o-ui-tabs-vertical .o-ui-tab-list {
    flex-direction: column;
    border-left: 2px solid var(--o-ui-alias-border-2);
}

/* TAB */
.o-ui-tab {
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: calc(var(--o-ui-global-scale-charlie) + 1px);
    border: transparent;
    transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
    width: max-content;
    min-width: var(--o-ui-global-scale-mike);
    height: max-content;
    min-height: var(--o-ui-global-scale-india);
    cursor: pointer;
    color: var(--o-ui-alias-text-2);
    position: relative;
    overflow: hidden;
}

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

/* TAB | WITH ICON */
.o-ui-tab-has-icon {
    padding-left: calc(var(--o-ui-global-scale-bravo) + 1px);
}

/* TAB | STATE | FOCUS */
.o-ui-tab::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: calc(var(--o-ui-global-scale-bravo) - 2px);
    border: var(--o-ui-focus-ring-thickness-md) transparent solid;
    border-radius: var(--o-ui-shape-rounded);
    pointer-events: none;
    height: calc(var(--o-ui-global-scale-echo) + var(--o-ui-global-scale-alpha));
    transition: var(--o-ui-focus-ring-transition);
}

/* TAB | STATE | FOCUS | ORIENTATION | HORIZONTAL */
.o-ui-tabs-horizontal .o-ui-tab::before {
    left: 0;
    right: 0;
}

.o-ui-tabs-horizontal .o-ui-tab {
    margin-right: var(--o-ui-global-scale-charlie);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

/* TAB | STATE | FOCUS | ORIENTATION | VERTICAL */
.o-ui-tabs-vertical .o-ui-tab::before{
    left: 1px;
    right: 0;
}

.o-ui-tabs-vertical .o-ui-tab {
    margin-bottom: var(--o-ui-global-scale-charlie);
    border-left: 2px solid transparent;
    margin-left: -2px;
    width: 100%;
    justify-content: start;
}

.o-ui-tabs-vertical .o-ui-tab:last-child {
    margin-bottom: 0;
}

/* TAB | STATE | DISABLED */
.o-ui-tab[disabled] {
    opacity: var(--o-ui-disabled-opacity);
    cursor: not-allowed;
}

/* TAB | STATE | FOCUS */
.o-ui-tab:not([disabled]):focus-visible:before,
.o-ui-tab-focus:not([disabled]):before {
    border-color: var(--o-ui-focus-ring-color);
}

/* TAB | STATE | HOVER */
.o-ui-tab:not([disabled]):hover,
.o-ui-tab-hover:not([disabled]) {
    color: var(--o-ui-alias-text-1);
}

/* TAB | STATE | SELECTED */
/* TAB | STATE | SELECTED | ORIENTATION | HORIZONTAL */
.o-ui-tabs-horizontal .o-ui-tab[aria-selected="true"] {
    border-bottom: 2px solid var(--o-ui-alias-border-4);
    color: var(--o-ui-alias-text-1);
}

/* TAB | STATE | SELECTED | ORIENTATION | VERTICAL */
.o-ui-tabs-vertical .o-ui-tab[aria-selected="true"] {
    border-left: 2px solid var(--o-ui-alias-border-4);
}

/* TAB | FLUID */
/* TAB | FLUID | ORIENTATION | HORIZONTAL */
.o-ui-tabs-fluid.o-ui-tabs-horizontal .o-ui-tab {
    width: 100%;
}

/* TAB | FLUID | ORIENTATION | VERTICAL */
.o-ui-tabs-fluid.o-ui-tabs-vertical .o-ui-tab {
    height: 100%;
}

/* TAB | TEXT */
.o-ui-tab-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.o-ui-tab .o-ui-tab-text {
    color: inherit;
}

.o-ui-tab .o-ui-tab-icon {
    color: inherit;
    fill: currentColor;
}

.o-ui-tab-icon + .o-ui-tab-text {
    margin-left: var(--o-ui-global-scale-alpha);
}

/* TAB | ICON */
.o-ui-tab-icon {
    flex-shrink: 0;
}

/* TAB | LOZENGE */
.o-ui-tab-text + .o-ui-tab-lozenge {
    margin-left: var(--o-ui-global-scale-bravo);
}

/* PANEL */
.o-ui-tab-panel {
    color: var(--o-ui-alias-text-1);
    text-align: left;
}

/* PANEL | ORIENTATION | HORIZONTAL */
.o-ui-tabs-horizontal .o-ui-tab-panel {
    padding: var(--o-ui-global-scale-delta) var(--o-ui-global-scale-bravo);
}

/*  PANEL | ORIENTATION | VERTICAL */
.o-ui-tabs-vertical .o-ui-tab-panel {
    padding: calc(var(--o-ui-global-scale-charlie) + 1px) var(--o-ui-global-scale-delta);
}

/* PANEL | FLUID */
.o-ui-tabs-fluid .o-ui-tab-panel {
    width: 100%;
    height: 100%;
}