/**
 * This file provides the design styles for the sidebar (navmain).
 */

.togglelink {
    &.page_main-content {
        position: absolute;
        top: 0;
        bottom: -1px;
        width: 2rem;
        left: -(@margin-default + 0.25rem);

        @media @screen_max-md {
            display: none;
        }

        a {
            position: absolute;
            inset: 0;

            width: @margin-default;
            height: 100%;
            background-color: transparent;
            border: solid 1px var(--color-shade-4);
            border-right-style: none;
            border-radius: 0.5rem 0 0 0.5rem;
            color: var(--color-shade-4);
            text-decoration: none;
            transition: @transition color, @transition background-color, @transition border-color;

            &::before {
                content: '';
                display: block;
                position: absolute;
                inset: 0.3rem;
                mask-size: contain;
                mask-position: center;
                mask-repeat: no-repeat;
                background-color: currentColor;
                mask-image: url('img/arrow_left.svg');

            }

            &:hover,
            &:focus,
            &:active {
                border-color: var(--color-glow-primary);
                color: var(--color-glow-primary);
                text-decoration: none;

                * {
                    color: inherit;
                    text-decoration: none;
                }

                filter: var(--filter-glow-primary);
                transition: var(--transition-glow);

            }
        }

        /* + + +  toggle out  + + + */

        .wide-content & {
            left: 0;

            a {
                border-radius: 0 0.5rem 0.5rem 0;
                border-style: solid;
                border-left-style: none;

                &::before {
                    mask-image: url('img/arrow_right.svg');
                }
            }
        }
    }
}