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

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

.cds-textfield {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;

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

    &__label {
        @include mixins.cds-paragraph-m;
        display: flex;
        align-items: center;
        padding-bottom: vars.$cds-spacing-25;

        [class^="cds-ico-"],
        [class*=" cds-ico-"] {
            color: var(--cds-color-text-surface);
        }
    }

    &__icon {
        position: absolute;
        padding: vars.$cds-spacing-25;
        margin: vars.$cds-spacing-25;
        color: var(--cds-color-text-default);
        bottom: 0;

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

    &__action {

        position: absolute;
        bottom: 0;
        right: 0;
        border-radius: $_cds-textfield-border-radius;
        padding: vars.$cds-spacing-25 vars.$cds-spacing-50;
        height: calc(vars.$cds-size-250 - 8px);
        transform: translate(-4px, -4px);
        max-width: min-content;
        align-content: center;
        cursor: pointer;

        @include mixins.cds-tertiary;

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

        &:hover {
            @include mixins.cds-tertiary--hover
        }

        &:active {
            @include mixins.cds-tertiary--active;
        }

        &:focus-visible {
            border-radius: $_cds-textfield-border-radius;
            background-color: var(--cds-color-background-default);
            color: var(--cds-color-accent-primary-main);
            border: 1px solid var(--cds-color-border-default);
            outline: 0 !important;
        }

        &.is-disabled,
        &:disabled {
            @include mixins.cds-tertiary--disabled;
        }
    }

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

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

        &::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,
        &.is-disabled {
            color: var(--cds-color-text-muted);
            background-color: var(--cds-color-background-soft);
            border: 1px solid var(--cds-color-border-default);
        }
    }

    &__validation {
        @include mixins.cds-paragraph-s;
        display: none;
        position: absolute;
        bottom: -4px;
        color: var(--cds-color-feedback-error-main);
        background-color: var(--cds-color-background-default);
        right: 0.5rem;
        line-height: 0.2;
        padding-inline: vars.$cds-spacing-50;
        line-height: 0.4rem;
    }

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

        .cds-textfield__validation {
            display: flex;
        }
    }

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

        .cds-textfield__icon,
        .cds-textfield__action {
            color: var(--cds-color-text-muted);
        }
    }

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

    &:has(.cds-textfield__action) {
        .cds-textfield__field {
            padding-right: vars.$cds-spacing-300;
        }
    }


}