@use 'sass:map';
@use 'sass:list';

$default-feature: "min-width";
@mixin media($query: $feature $value $columns) {
    @if list.length($query) == 1 {
        @media screen and ($default-feature: list.nth($query, 1)) {
            @content;
        }
    }
    @else {
        $loop-to: list.length($query);
        $media-query: "screen and ";
        @if is-not(is-even(list.length($query))) {
            $loop-to: $loop-to - 1;
        }
        $i: 1;
        @while $i <=$loop-to {
            $media-query: $media-query + "(" + list.nth($query, $i) + ": " + list.nth($query, $i + 1) + ") ";
            @if ($i + 1) != $loop-to {
                $media-query: $media-query + "and ";
            }
            $i: $i+2;
        }
        @media #{$media-query} {
            @content;
        }
    }
}

@mixin eds-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin eds-focus-visible($offset: -2px, $size: 2px) {
    &:focus-visible:not([readonly]) {
        outline: $size solid var(--eds-c-border-primary) !important;
        outline-offset: $offset !important;
        transition: none;
    }
}
@mixin eds-focus-ring($offset: 1px) {
    &:focus:not([readonly]) {
        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
        outline-offset: $offset !important;
        border-radius: var(--eds-br-xs) !important;
    }
}
@mixin eds-focus-ring-rounded($offset: 1px) {
    &:focus:not([readonly]) {
        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
        outline-offset: $offset !important;
        border-radius: var(--eds-br-full) !important;
    }
}
@mixin eds-focus-visible-ring($offset: 1px) {
    &:focus-visible:not([readonly]) {
        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
        outline-offset: $offset !important;
        border-radius: var(--eds-br-xs) !important;
    }
}
@mixin eds-focus-visible-ring-rounded($offset: 1px) {
    &:focus-visible:not([readonly]) {
        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
        outline-offset: $offset !important;
        border-radius: var(--eds-br-full) !important;
    }
}


@mixin loading-indicator() {
    align-items: center;
    display: flex;

    &::after,
    &::before {
        content: '';
        height: var(--eds-sp-l);
        position: absolute;
        right: var(--eds-sp-s);
        width: var(--eds-sp-l);
    }

    &::before {
        border: var(--eds-sp-3xs) solid rgba(0, 0, 0, 0.35);
        border-radius: 100%;
    }

    &::after {
        animation: loading 0.6s linear;
        animation-iteration-count: infinite;
        border-color: var(--eui-c-white) transparent transparent;
        border-radius: 100%;
        border-style: solid;
        border-width: var(--eds-sp-3xs);
        box-shadow: 0 0 0 1px transparent;
    }

    &--sm::after,
    &--sm::before {
        height: var(--eds-sp-m);
        width: var(--eds-sp-m);
    }

    @keyframes loading {
        to { transform: rotate(360deg); }
    }
}

// EDS Input mixin — common styles for text inputs, textareas, selects
@mixin eds-input() {
    font: var(--eds-f-paragraph-m);
    appearance: none;
    background-color: var(--eds-c-surface-elevation);
    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
    border-radius: var(--eds-br-s);
    box-shadow: none;
    color: var(--eds-c-foreground-default);
    min-height: var(--eds-si-3xl);
    padding: var(--eds-sp-xs) var(--eds-sp-s);
    width: 100%;
    @include eds-focus-visible();

    &:not([hidden]) {
        display: block;
    }

    &::placeholder {
        color: var(--eds-c-foreground-subtler);
        opacity: 1;
    }

    // Readonly
    &[readonly] {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
        pointer-events: none;
    }

    // Disabled
    &:disabled:not([readonly]),
    &--disabled:not([readonly]) {
        background-color: var(--eds-c-suface-disabled);
        border-color: var(--eds-c-border-disabled);
        color: var(--eds-c-foreground-subtler);
        pointer-events: none;
    }

    // Invalid
    &--invalid {
        border-color: var(--eds-c-border-critical);
    }

    &--loading {
        padding-right: var(--eds-sp-7xl);

        &-icon {
            @include loading-indicator();
        }
    }    
}