@use '../../scss/config.scss' as *;

.switcher {
    --size: var(--w-theme-switcher-size, 20px);

    @include layout(flex, sm);

    &.toggle {
        @include position(relative);
        width: var(--size);
        height: var(--size);

        .switch {
            position: absolute;

            &:first-child {
                @include layer(overlay);
            }

            &:nth-child(2) {
                @include layer(fg);
            }

            &[data-active="true"] {
                @include layer(popup);
            }
        }
    }
}

.switch {
    @include border(0);
    @include border-radius(max);
    @include position(relative);

    width: var(--size);
    height: var(--size);
    cursor: pointer;
    user-select: none;

    &.icons {
        @include transition(opacity);
        @include typography(primary);
        @include background(transparent);
        @include spacing(p0);
        @include visibility(0);

        &[data-active="true"] {
            @include visibility(1);
        }

        svg, img {
            pointer-events: none;
            width: var(--size);
            height: var(--size);
        }
    }

    &:not(.icons)::after {
        @include position(absolute, center);
        @include border(primary);
        @include border-radius(max);
        @include layer(bg);
        @include transition();
        @include size(0);

        content: '';
    }

    &[data-active="true"]::after {
        @include layer(default);
        width: calc(var(--size) + 5px);
        height: calc(var(--size) + 5px);
    }
}