@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$select-height: h.useVar("control-height") !default;
$select-padding: h.useVar("control-padding-vertical")
    h.useVar("control-padding-horizontal") !default;
$select-disabled-opacity: h.useVar("control-disabled-opacity") !default;

$select-color: h.useVar("font-color") !default;
$select-font-size: h.useVar("font-size") !default;
$select-font-weight: h.useVar("font-weight") !default;
$select-line-height: h.useVar("line-height") !default;

$select-box-shadow: h.useVar("control-box-shadow-inset") !default;
$select-background-color: h.useVar("control-background-color") !default;
$select-border-color: h.useVar("control-border-color") !default;
$select-border-style: solid !default;
$select-border-width: h.useVar("control-border-width") !default;
$select-border-radius: h.useVar("border-radius") !default;
$select-border-radius-rounded: h.useVar("border-radius-rounded") !default;

$select-multiple-padding: h.useVar("control-spacer") !default;
$select-arrow-color: vars.$font-color !default;
$select-arrow-size: 1em !default;
/* @docs */

@function svg_arrow($color) {
    $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
    $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color}"/></g>';
    $end: "</svg>";

    @return h.svg-encode("#{$start}#{$content}#{$end}");
}

.o-select {
    @include h.defineVar("select-height", $select-height);
    @include h.defineVar("select-padding", $select-padding);
    @include h.defineVar("select-disabled-opacity", $select-disabled-opacity);

    @include h.defineVar("select-color", $select-color);
    @include h.defineVar("select-font-size", $select-font-size);
    @include h.defineVar("select-font-weight", $select-font-weight);
    @include h.defineVar("select-line-height", $select-line-height);

    @include h.defineVar("select-box-shadow", $select-box-shadow);
    @include h.defineVar("select-background-color", $select-background-color);
    @include h.defineVar("select-border-color", $select-border-color);
    @include h.defineVar("select-border-style", $select-border-style);
    @include h.defineVar("select-border-width", $select-border-width);
    @include h.defineVar("select-border-radius", $select-border-radius);
    @include h.defineVar(
        "select-border-radius-rounded",
        $select-border-radius-rounded
    );
    @include h.defineVar("select-arrow-size", $select-arrow-size);
    @include h.defineVar(
        "select-arrow-background-image",
        url(svg_arrow($select-arrow-color))
    );
    @include h.defineVar("select-multiple-padding", $select-multiple-padding);

    // define focus shadow effect
    @include h.focusable(".o-select__input");

    display: inline-block;
    position: relative;

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar("select-font-size", h.useVar("size-#{$name}"));
        }
    }

    // color variants
    @each $name, $pair in vars.$colors {
        $color: list.nth($pair, 1);
        &--#{$name} {
            @include h.defineVar("select-border-color", h.useVar($name));
            @include h.defineVar(
                "select-arrow-background-image",
                url(svg_arrow($color))
            );
        }
    }

    &__input {
        // remove default appearance
        @include h.removeAppearance;

        display: inline-block;
        position: relative;

        height: h.useVar("select-height");
        padding: h.useVar("select-padding");

        color: h.useVar("select-color");
        font-size: h.useVar("select-font-size");
        font-weight: h.useVar("select-font-weight");
        line-height: h.useVar("select-line-height");

        box-shadow: h.useVar("select-box-shadow");
        background-color: h.useVar("select-background-color");
        border-color: h.useVar("select-border-color");
        border-style: h.useVar("select-border-style");
        border-width: h.useVar("select-border-width");
        border-radius: h.useVar("select-border-radius");

        &--arrowed {
            background-image: h.useVar("select-arrow-background-image");
            background-repeat: no-repeat;
            background-size: h.useVar("select-arrow-size");
            background-position: calc(
                    100% - h.useVar("select-arrow-size") * 0.5
                )
                center;
            padding-right: calc(h.useVar("select-arrow-size") * 2);
        }

        &--iconspace-left {
            padding-left: h.useVar("select-height");
        }

        &--iconspace-right {
            padding-right: h.useVar("select-height");
        }
    }

    &--rounded {
        @include h.defineVar(
            "select-border-radius",
            h.useVar("select-border-radius-rounded")
        );
    }

    &--disabled {
        @include h.disabled(h.useVar("select-disabled-opacity"));
    }

    &--expanded {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;

        .o-select__input {
            width: 100%;
        }
    }

    &--multiple .o-select__input {
        height: auto;
        padding: h.useVar("select-multiple-padding");
    }

    &__icon-left,
    &__icon-right {
        position: absolute;
        top: 0;
        height: 100%;
        width: h.useVar("select-height");
        z-index: 1;
    }

    &__icon-right {
        right: 0;
    }

    &__icon-left {
        left: 0;
    }
}