@use "sass:math";
@use "sass:color" as sassCol;
@use "helper";
@use "var";
@use "gap";
@use "color";

@function shadow($x, $y, $color, $soft: false) {
    $x: helper.number-of($x, "shadow", "x");
    $y: helper.number-of($y, "shadow", "y");
    $color: helper.color-of($color, "shadow", "color");
    $soft: helper.bool-of($soft, "shadow", "soft");
    $max: math.max(math.abs($x), math.abs($y));
    $blur: $max * if($soft == true, 3, 2);
    $spread: $max * if($soft == true, -1, 0);
    $color: sassCol.change($color, $alpha: if($soft == true, 0.15, 0.3));
    @return $x $y $blur $spread $color;
}

@function control-padding() {
    @return gap.gap("micro") (gap.gap("micro") * 2);
}

@mixin transition($field) {
    transition: $field var.var("transition", "duration", 250ms)
        var.var("transition", "ease", ease);
}

@mixin disabled() {
    pointer-events: none;
    user-select: none;
    background-color: color.variant("input", "disabled");
    border-color: color.variant("input", "disabled-border");
    color: color.variant("input", "disabled-color");
}

@mixin clearfix() {
    &::after {
        clear: both;
        content: " ";
        display: table;
    }
}

@mixin overflow-touch() {
    -webkit-overflow-scrolling: touch;
}

@mixin locked() {
    pointer-events: none;
    user-select: none;
}

@mixin unselectable() {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@mixin selectable() {
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

@mixin placeholder {
    $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
    @each $placeholder in $placeholders {
        &:#{$placeholder}-placeholder {
            @content;
        }
    }
}

@mixin reset() {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    box-shadow: none;
    background: none;
    position: relative;
    border: none;
    color: currentColor;
    font-family: inherit;
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 1em;
    line-height: 1em;
    overflow: hidden;
}

@mixin control() {
    @include reset();

    &:focus,
    &.is-focused,
    &:active,
    &.is-active {
        outline: none;
    }

    &[disabled],
    fieldset[disabled] &,
    &.is-disabled {
        cursor: default;
        pointer-events: none;
        user-select: none;
    }

    &:invalid {
        outline: none;
    }

    &::-moz-focus-inner {
        border: 0;
    }
}

@mixin selection($name) {
    $name: helper.string-of($name, "selection", "name");

    &::selection, *::selection {
        background-color: color.color($name);
        color: color.variant($name, "color");
    }
}

@mixin scrollbar($width, $track: null, $thumb: null, $thumb-hover: null) {
    $width: helper.number-of($width, "scrollbar", "width");
    $track: helper.color-of($track, "scrollbar", "track");
    $thumb: helper.color-of($thumb, "scrollbar", "thumb");
    $thumb-hover: helper.color-of($thumb-hover, "scrollbar", "thumb-hover");

    &::-webkit-scrollbar {
        width: $width;
    }

    &::-webkit-scrollbar-track {
        background: $track;
    }

    &::-webkit-scrollbar-thumb {
        background: $thumb;
        transition: all 200ms linear;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: $thumb-hover;
    }
}

@mixin scrollable($color) {
    $color: helper.color-of($color, "scrollable", "color");

    @include scrollbar(
        var.var("scroll", "size", 1erm),
        var.var("scroll", "track", color.variant("base", "section")),
        var.var("scroll", "thumb", color.variant("base", "separator")),
        $color
    );
}

@mixin scroll-color($color) {
    $color: helper.color-of($color, "scroll-color", "color");
    &::-webkit-scrollbar-thumb:hover {
        background: $color;
    }
}

@mixin spinner($size, $color, $width) {
    $size: helper.number-of($size, "spinner", "size");
    $color: helper.color-of($color, "spinner", "color");
    $width: helper.number-of($width, "spinner", "width");
    text-rendering: optimizeLegibility;
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: " ";
    width: $size;
    height: $size;
    border: $width solid $color;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 500ms infinite linear;
}

@mixin spinner-color($color) {
    $color: helper.color-of($color, "spinner-color", "color");
    border-left-color: $color;
    border-bottom-color: $color;
}

@mixin loader($size, $color, $width) {
    $size: helper.number-of($size, "loader", "size");
    $color: helper.color-of($color, "loader", "color");
    $width: helper.number-of($width, "loader", "width");
    position: relative;
    z-index: 0;

    &::after {
        @include spinner($size, $color, $width);
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        z-index: 2;
    }
}

@mixin loader-color($color) {
    $color: helper.color-of($color, "loader-color", "color");
    &::after {
        border-left-color: $color;
        border-bottom-color: $color;
    }
}

@mixin overlay($color, $filter) {
    $color: helper.color-of($color, "overlay", "color");
    position: relative;
    z-index: 0;

    &::before {
        content: " ";
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: $color;
        backdrop-filter: $filter;
    }
}