/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/tab_bars_vars";
@import "../mixins";

.dlt-tab-bar {
    @include component-vars(tab-bar);
    margin: 0;
    padding: 0;
    height: auto;
    width: 100%;
    position: relative;
    font-family: $tab-bars-font-family;

    ul.dlt-tab-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        background: $tab-bars-color-background;
        display: flex;
        justify-content: flex-start;
        border-radius: $tab-bars-border-radii $tab-bars-border-radii 0 0;

        li {
            display: flex;
            flex-direction: row;
            height: auto;
            margin: 0;
        }

        li a.dlt-tab-link {
            position: relative;
            width: 100%;
            padding: $tab-bars-title-padding;
            border: none;
            text-align: center;
            display: inline-block;
            font-size: $tab-bars-title-font-size;
            font-weight: $tab-bars-title-font-weight;
            color: $tab-bars-color-title;
            white-space: nowrap;
            text-overflow: clip;
            text-decoration: none;
            max-width: $tab-bars-title-max-width;
            overflow: hidden;
            // Tab underline
            &::after {
                position: absolute;
                background-color: $tab-bars-color-border;
                content: "";
                display: inline-block;
                width: 100%;
                height: $tab-bars-border-width-hover;
                left: 0;
                top: calc(100% - $tab-bars-border-width-hover);
            }

            // Border replaces underline on hover and focus
            &:hover,
            &:focus {
                padding: $tab-bars-title-padding-hover-focus;
                border: $tab-bars-border-width-hover $tab-bars-border-style $tab-bars-color-primary;
                &::after {
                    display: none;
                }
            }

            &.dlt-tab-link-selected {
                font-weight: $tab-bars-title-font-weight-selected;
                padding-right: $tab-bars-title-padding-right-selected;
                &::after {
                    background-color: $tab-bars-color-primary;
                }
                &:hover,
                &:focus {
                    border: $tab-bars-border-width-hover $tab-bars-border-style $tab-bars-color-primary;
                    padding-right: $tab-bars-title-padding-right-selected-hover-focus;
                    &::after {
                        display: none;
                    }
                }
            }

            &:disabled,
            &.dlt-tab-link-disabled {
                opacity: $tab-bars-opacity-disabled;
                cursor: not-allowed;

                &:hover,
                &:focus {
                    border-color: $tab-bars-color-background;
                    border-bottom: $tab-bars-border-width-hover $tab-bars-border-style $tab-bars-color-border;
                    outline: none;
                }
            }
        }
    }

    & .dlt-tab-panel {
        padding: $tab-bars-content-padding;
        width: 100%;
        height: auto;
        overflow: hidden;
        background: $tab-bars-color-background;
        display: none;
        border-radius: 0 0 $tab-bars-border-radii $tab-bars-border-radii;

        &.dlt-tab-panel-open {
            display: block;
        }
    }
}