@import "app/styles/variables";

bl-file-explorer-tabs {
    $tab-height: 28px;
    display: block;
    .tablist {
        height: $tab-height;
        background: $secondary-background;
        display: flex;

        > .tab {
            display: flex;
            align-items: center;
            height: $tab-height;
            min-width: fit-content;
            white-space: nowrap;
            cursor: pointer;
            padding-left: 10px;
            color: $secondary-text;
            border-right: 1px solid $border-color;
            user-select: none;
        }

        > .tab.main {
            font-size: 24px;
            padding: 5px;
        }

        > .tab.active {
            background: $main-background;
        }

        > .tab .tab-close {
            width: 18px;
            padding: 0 3px;

            > .close-icon {
                color: $secondary-text;
                opacity: 0;

                &:hover {
                    color: $hover-bg-color;
                }
            }


            &:focus > .close-icon {
                opacity: 1;
            }
        }

        > .tab.active, > .tab:hover {
            .tab-close > .close-icon {
                opacity: 1;
            }
        }

    }
}
