/**
 * Tabs
 *
 * Need to be rename for global use
 */

.tab-container {
    margin: 0 auto;
}

.tab-header {
    display: flex;
    border-bottom: var(--tabs-header-border);
    gap: var(--tabs-header-gap);
    margin-inline: var(--tabs-header-margin-inline);
}

a.tab-button, .tab-button {
    border: none;
    cursor: pointer;
    color: var(--tabs-button-color);
    background: none;
    padding-block: var(--tabs-button-padding-block);
    padding-inline: var(--tabs-button-padding-inline);
    font-size: var(--tabs-button-font-size);
    font-weight: var(--tabs-button-font-weight);
    line-height: var(--tabs-button-line-height);
    text-decoration: none;
    position: relative; /* ensure ornament positions relative to button */
    border-radius: var(--tabs-button-border-radius);
}

a.tab-button:not(.active):hover, .tab-button:not(.active):hover {
    background-color: var(--tabs-button-hover-bg);
    color: var(--tabs-button-hover-color);
}

a.tab-button.active, .tab-button.active {
    color: var(--tabs-active-color);
    position: relative;
}
a.tab-button:after, .tab-button:after {
    content: "";
    width: calc(100% - 8px);
    height: var(--tabs-underline-height);
    border-radius: var(--tabs-underline-radius) var(--tabs-underline-radius) 0 0;
    background-color: var(--tabs-ornament-color);
    position: absolute;
    bottom: 0;
    left: 4px;
}

a.tab-button.active:after, .tab-button.active:after {
    --tabs-ornament-color: var(--tabs-active-color);
}

a.tab-button:not(.active):hover:after, .tab-button:not(.active):hover:after {
    --tabs-ornament-color: var(--tabs-button-hover-color);
}

a.tab-button:focus, .tab-button:focus {
    outline: none;
    box-shadow: none;
}
a.tab-button:focus-visible, .tab-button:focus-visible {
    outline: 2px solid var(--interaction-color);
}

/*a.tab-button:focus:after, .tab-button:focus:after {*/
/*    width: calc(100% - 8px);*/
/*    left: 4px;*/
/*}*/

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-content {
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto;
    height: var(--tabs-content-height);
    padding: var(--search-result-padding);
}

.dm-pro-admin-panel {
    --tabs-header-margin-inline: 0;
    --tabs-button-hover-bg: transparent;
    --tabs-button-hover-color: var(--grey-38);
    --tabs-active-color: var(--interaction-color);
}