@import '../../../styles/mixins';

.dc-nav-toc-panel {
    display: flex;
    justify-content: center;
    width: 100%;
    background: var(--yc-color-base-background);

    @include text-size(body-1);

    &_fixed {
        position: fixed;
        bottom: 0;
        z-index: 1000;
        left: 0;
        border-top: 1px solid var(--yc-color-line-generic);
    }

    &_fixed &__control-hint {
        display: none;
    }

    &_fixed &__content {
        padding: 0 40px;
    }

    &__content {
        display: flex;
        justify-content: space-between;
        flex: 1;
        max-width: 1440px;
    }

    &__control {
        display: flex;
        flex-direction: column;
        width: 48%;

        &_left {
            align-items: flex-start;
        }

        &_right {
            align-items: flex-end;
        }

        & svg {
            margin-top: -1px;
            min-width: 16px;
        }

        &_left svg {
            margin-right: 6px;
        }

        &_right svg {
            margin-left: 6px;
        }
    }

    &__control-hint {
        color: var(--yc-color-text-hint);
    }

    &__control-text {
        display: flex;
        align-items: center;
    }

    &__link {
        display: flex;
        align-items: center;
        min-height: 32px;
        color: var(--yc-color-text-primary);
        font-weight: 500;
    }
}