/* TABS */
.o-ui-tabs {
    height: max-content;
    --o-ui-tab-stroke-width: 4px;
}

/* 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: var(--o-ui-tab-stroke-width) solid var(--o-ui-b-alias-low-break);
    align-items: center;
}

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

/* TAB LIST | POPOVER | TRIGGER */
.o-ui-tab-list-popover-trigger {
    border: none;
    border-radius: var(--o-ui-br-2);
    color: var(--o-ui-text-alias-secondary);
    font-size: var(--o-ui-fs-3);
    position: relative;
    padding: var(--o-ui-text-button-padding-md);
    height: var(--o-ui-sp-7);
    flex-shrink: 0;
}

/* TAB LIST | POPOVER | TRIGGER | OPEN */
.o-ui-tab-list-popover-trigger[aria-expanded="true"] {
    background-color: var(--o-ui-bg-alias-basic-transparent-hover);
}

/* TAB LIST | POPOVER | TRIGGER | HOVER */
.o-ui-tab-list-popover-trigger:not([disabled]):hover {
    background-color: var(--o-ui-bg-alias-basic-transparent-hover);
}

/* TAB LIST | POPOVER */
.o-ui-tab-list-popover {
    background-color: var(--o-ui-bg-alias-surface);
    border: 1px solid var(--o-ui-b-alias-low-break);
    border-radius: var(--o-ui-br-3);
    box-shadow: var(--o-ui-bs-alias-floating);
    margin-top: var(--o-ui-sp-2);
}

/* TAB LIST | POPOVER | TAB */
.o-ui-tab-list-popover .o-ui-tab {
    padding-left: calc(var(--o-ui-sp-3) + 1px);
    padding-right: var(--o-ui-sp-8);
    justify-content: start;
    width: 100%;
    min-height: var(--o-ui-sz-7);
}

/* TAB LIST | POPOVER | TAB */
.o-ui-tab-list-popover .o-ui-tab:not([disabled]):hover {
    background-color: var(--o-ui-bg-alias-mid-break);
    border-bottom: 0;
}

/* TAB LIST | POPOVER | FOCUS */
.o-ui-tab-list-popover .o-ui-tab::before {
    left: 8px;
    right: 8px;
}

/* TAB LIST | HIDDEN TABS */
.o-ui-tab-list-hidden-tabs {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -9999;
}

.o-ui-tab-list-hidden-tab {
    width: max-content;
}

/* TAB */
.o-ui-tab {
    outline: transparent;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--o-ui-sp-3);
    border: transparent;
    transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
    min-width: max-content;
    min-height: var(--o-ui-sz-7);
    color: var(--o-ui-text-alias-secondary);
    position: relative;
    font-family: inherit;
}

/* View https://css-tricks.com/slightly-careful-sub-elements-clickable-things */
.o-ui-tab > * {
    pointer-events: none;
}

/* TAB | WITH ICON */
.o-ui-tab-has-icon,
.o-ui-tab-list-popover .o-ui-tab-has-icon {
    padding-left: calc(0.5rem + 1px);
}

/* TAB | STATE | FOCUS */
.o-ui-tab::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: calc(0.5rem - var(--o-ui-tab-stroke-width));
    border: var(--o-ui-focus-ring-thickness-md) transparent solid;
    border-radius: var(--o-ui-br-2);
    pointer-events: none;
    height: calc(var(--o-ui-sz-3) + 0.25rem);
    transition: var(--o-ui-focus-ring-transition);
}

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

.o-ui-tabs-horizontal .o-ui-tab {
    border-bottom: var(--o-ui-tab-stroke-width)  solid transparent;
    margin-bottom: calc(-1 * var(--o-ui-tab-stroke-width));
}

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

.o-ui-tabs-vertical .o-ui-tab {
    border-left: var(--o-ui-tab-stroke-width)  solid transparent;
    margin-left: calc(-1 * var(--o-ui-tab-stroke-width));
    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-alias-default);
}

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

.o-ui-tabs-horizontal .o-ui-tab:not([disabled]):not([aria-selected="true"]):hover,
.o-ui-tabs-horizontal .o-ui-tab-hover:not([disabled]):not([aria-selected="true"]) {
    border-bottom: var(--o-ui-tab-stroke-width) solid var(--o-ui-b-alias-mid-break);
}

.o-ui-tabs-vertical .o-ui-tab:not([disabled]):not([aria-selected="true"]):hover,
.o-ui-tabs-vertical .o-ui-tab-hover:not([disabled]):not([aria-selected="true"]) {
    border-left: var(--o-ui-tab-stroke-width) solid var(--o-ui-b-alias-mid-break);
}

/* TAB | STATE | SELECTED */
/* TAB | STATE | SELECTED | ORIENTATION | HORIZONTAL */
.o-ui-tabs-horizontal .o-ui-tab[aria-selected="true"] {
    border-bottom: var(--o-ui-tab-stroke-width) solid var(--o-ui-bg-alias-accent);
    color: var(--o-ui-text-alias-primary);
}

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

/* TAB | FLUID */
/* TAB | FLUID | ORIENTATION | HORIZONTAL */
.o-ui-tabs-fluid.o-ui-tabs-horizontal .o-ui-tab {
    flex-grow: 1;
    flex-shrink: 1;
}

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

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

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

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

.o-ui-tab-icon + .o-ui-tab-text {
    margin-left: var(--o-ui-sp-1);
}

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

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

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

/* PANEL | ORIENTATION | HORIZONTAL */
.o-ui-tabs-horizontal .o-ui-tab-panel {
    padding: var(--o-ui-sp-4) var(--o-ui-sp-2);
}

/*  PANEL | ORIENTATION | VERTICAL */
.o-ui-tabs-vertical .o-ui-tab-panel {
    padding: calc(var(--o-ui-sp-3) + 1px) var(--o-ui-sp-4);
}

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