@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);
    }
}