@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

@forward "cds-textfield";

$_cds-textfield-border-radius: var(--cds-textfield-br) !default;

.cds-select {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-end;

    &.is-required {
        .cds-select__label::after {
            content: "*";
            color: var(--cds-color-accent-primary-main);
        }
    }


    &__label {
        @extend .cds-textfield__label;
    }

    &__icon {
        @extend .cds-textfield__icon;
    }

    /*&__action {
        @extend .cds-textfield__action;
        pointer-events: none;
    }*/


    &__chevron {
        @include mixins.cds-icon(config.$default-icon-chevron);
        transform: rotate(90deg);
        position: absolute;
        //padding: vars.$cds-spacing-25;
        margin: vars.$cds-spacing-50;
        color: var(--cds-color-text-default);
        bottom: 0;
        right: 0;
        pointer-events: none;

        &::before {
            @include mixins.cds-icon-size(vars.$cds-icon-150);
        }
    }

    &__field {
        @include mixins.cds-paragraph-m;
        border-radius: $_cds-textfield-border-radius;
        padding: vars.$cds-spacing-50;
        padding-right: vars.$cds-spacing-250;
        width: 100%;
        height: vars.$cds-size-250;
        cursor: pointer;

        color: var(--cds-color-text-default);
        background-color: var(--cds-color-background-default);
        border: 1px solid var(--cds-color-border-default);

        appearance: none;
        -webkit-appearance: none;



        &::placeholder {
            color: var(--cds-color-text-muted);
        }

        &:hover {
            color: var(--cds-color-text-default);
            border: 1px solid var(--cds-color-border-default--hover);
        }

        &:invalid:not(:required) {
            border-color: var(--cds-color-feedback-error-main);
        }

        &:disabled {
            color: var(--cds-color-text-muted);
            background-color: var(--cds-color-background-disabled);
            border: 1px solid var(--cds-color-border-muted);
        }
    }

    &__validation {
        @extend .cds-textfield__validation;
    }

    &:invalid,
    &:user-invalid,
    &.is-invalid {
        .cds-select__field {
            border-color: var(--cds-color-feedback-error-main);
        }

        .cds-select__validation {
            display: flex;
        }
    }

    &:disabled,
    &.is-disabled {
        .cds-select__field {
            color: var(--cds-color-text-muted);
            background-color: var(--cds-color-background-soft);
            border: 1px solid var(--cds-color-border-muted);
        }

        .cds-select__icon {
            color: var(--cds-color-text-muted);
        }
    }

    &:has(.cds-select__icon) {
        .cds-select__field {
            padding-left: vars.$cds-spacing-250;
        }
    }

    /*&:has(.cds-select__action) {
        .cds-select__field {
            padding-right: vars.$cds-spacing-300;
        }
    }*/


}