@use "sass:color";
@import "./color";

@mixin scrollbar($color: whitesmoke) {
    &::-webkit-scrollbar {
        width: 8PX;
        height: 8PX;
        background: none;
    }
    &::-webkit-scrollbar-thumb {
        width: 8PX;
        border: 2PX solid transparent;
        border-radius: 4PX;
        background: $color;
        background-clip: content-box;
    }
    &::-webkit-scrollbar-button {
        display: none;
    }
    &::-webkit-scrollbar-corner {
        display: none;
    }
}

@mixin light-scrollbar {
    @include scrollbar(darken($light-background, 15%));
}

@mixin dark-scrollbar {
    @include scrollbar(color.change($dark-background, $lightness: 30%));
}

@mixin shadow-border($color: currentColor, $width: 1PX) {
    box-shadow: 
        $width 0 0 0 $color,
        0 $width 0 0 $color,
        $width $width 0 0 $color,
        $width 0 0 0 $color inset,
        0 $width 0 0 $color inset;
}

@mixin switch($isColumn: false,
    $width: (46em / 16 / 0.75),
    $height: (30em / 16 / 0.75),
    $round: (6em / 16 / 0.75),
    $border-width: 0,
) {
    position: relative;
    display: flex;
    line-height: $height;
    border-radius: $round;
    background: #f6f6f6;

    &::before {
        display: block;
        content: '';
        position: absolute;
        width: $width;
        height: $height;
        border-radius: $round;
        background: rgb(76 89 248 / 10%);
        transition: transform 0.3s;
        box-sizing: border-box;
        border: $border-width solid transparent;
    }

    &.i {
        &::before {
            transform: translate(0, 0);
        }

        .item:nth-child(1) {
            font-weight: bold;
        }
    }

    &.ii {
        &::before {
            @if $isColumn {
                transform: translate(0, 100%);
            }

            @else {
                transform: translate(100%, 0);
            }
        }

        .item:nth-child(2) {
            font-weight: bold;
        }
    }

    &.iii {
        &::before {
            @if $isColumn {
                transform: translate(0, 200%);
            }

            @else {
                transform: translate(200%, 0);
            }
        }

        .item:nth-child(3) {
            font-weight: bold;
        }
    }

    &.iiii {
        &::before {
            @if $isColumn {
                transform: translate(0, 300%);
            }

            @else {
                transform: translate(300%, 0);
            }
        }

        .item:nth-child(4) {
            font-weight: bold;
        }
    }

    >.item {
        z-index: 2;
        width: $width;
        height: $height;
        text-align: center;
    }
}