@mixin inset($top, $right, $bottom, $left) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

@mixin scrollbar() {
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(168, 168, 168, 0.9);
        border-radius: 4px;
    }
}

@mixin outline() {

    &:focus,
    &:focus-visible {
        outline: none;
    }
}

@mixin outborder() {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color .12s ease;

    @include outline();

    &:focus,
    &:hover {
        border-color: var(--focus-border-color);
    }

    &:disabled {
        border-color: var(--disabled-border-color);
        color: var(--disabled-color);
        background-color: var(--disabled-bg-color);
    }
}

@mixin ui-check() {
    .ui-check-inner {
        position: relative;
        display: inline-block;
        padding: 0;
        width: 14px;
        height: 14px;
        background-color: #fff;
        user-select: none;
        cursor: pointer;

        @include outborder();

        >svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            fill: #fff;
            transform: scale(0);
            opacity: 0;
            transition: all .08s cubic-bezier(.78, .14, .15, .86);
        }
    }

    &.ui-radio-wrapper {
        .ui-check-inner {
            box-sizing: border-box;
            border-radius: 8px;
            width: 16px;
            height: 16px;
        }
    }

    >input[type="checkbox"],
    >input[type="radio"] {
        display: none;

        &:checked+.ui-check-inner {
            border-color: var(--link-color);
            background-color: var(--link-color);

            >svg {
                transform: scale(1);
                opacity: 1;
            }
        }

        &:disabled {

            &:checked+.ui-check-inner {
                border-color: var(--disabled-border-color);
                background-color: var(--disabled-border-color);
            }

            +.ui-check-inner {
                border-color: var(--disabled-border-color);
                background-color: var(--disabled-bg-color);
                cursor: default;
            }

            ~span {
                color: var(--disabled-border-color);
                cursor: default;
            }
        }
    }
}