@import "../variables/variables";
@import "../mixins/private/token-mixins";

.tabs,
.fake-tabs {
    margin-top: var(--spacing-200);
}

span.tabs,
span.fake-tabs {
    display: inline-block;
}

div.tabs__items[role="tablist"],
ul.fake-tabs__items {
    font-size: var(--font-size-default);
}

ul.fake-tabs__items {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

div.tabs__item[role="tab"] {
    cursor: default;
}

div.tabs__item[role="tab"],
li.fake-tabs__item {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: var(--color-background-secondary);

    &:not(:last-child) {
        margin-inline-end: var(--spacing-450);
    }
}

li.fake-tabs__item > a {
    padding: 1px 0;
    text-decoration: none;
}

div.tabs__item[role="tab"] > span {
    padding: 2px 0;
}

div.tabs__item[role="tab"] > span,
li.fake-tabs__item > a {
    @include color-token(
        tabs-item-foreground-color,
        color-foreground-secondary
    );

    display: inline-block;

    &::after {
        background-color: transparent;
        border-radius: 6px;
        content: "";
        display: block;
        height: 2px;
        margin-top: var(--spacing-50);
        position: absolute; /* required to avoid focus outline issues */
        width: 100%;
    }
}

div.tabs__item[role="tab"][aria-selected="true"] > span,
li.fake-tabs__item > a[aria-current] {
    @include color-token(
        tabs-item-selected-foreground-color,
        color-foreground-primary
    );

    &::after {
        background-color: currentColor;
    }
}

/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
div.tabs__item[role="tab"]:focus,
li.fake-tabs__item a:focus {
    &:not(:focus-visible) {
        outline: none;
    }
}

div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span,
div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span,
li.fake-tabs__item > a:not([aria-current]):focus,
li.fake-tabs__item > a:not([aria-current]):hover {
    @include color-token(
        tabs-item-hover-foreground-color,
        color-foreground-secondary
    );

    &::after {
        background-color: currentColor;
    }
}

.tabs__cell,
.fake-tabs__cell {
    margin: var(--spacing-200) 0;
}
