// Copyright (C) 2017-2024 Smart code 203358507

@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';

.nav-tab-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 0.75rem;

    @media (pointer: fine) {
        &:hover {
            background-color: var(--overlay-color);

            .label {
                opacity: 0.6;
            }

            &:global(.selected) {
                .label {
                    opacity: 1;
                }
            }
        }
    }

    &:global(.selected) {
        .icon {
            opacity: 1;
        }

        .icon, .label {
            color: var(--primary-accent-color);
        }
    }

    .icon, .logo {
        flex: none;
        width: 2.2rem;
        height: 2.2rem;
        margin-bottom: 0.5rem;
    }

    .icon {
        color: var(--primary-foreground-color);
        opacity: 0.35;
    }

    .label {
        flex: none;
        position: relative;
        max-width: 100%;
        max-height: 2.4em;
        padding: 0 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.01rem;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--primary-foreground-color);
        opacity: 0;
        overflow: hidden;
    }
}

@media only screen and (max-width: @minimum) {
    .nav-tab-button-container {
        .label {
            opacity: 0.6;
        }

        &:global(.selected) {
            .label {
                opacity: 1;
            }
        }
    }
}