@use 'common-mixins' as mixins;

form .iqser-input-group:not(first-of-type) {
    margin-top: 14px;
}

.iqser-input-group {
    display: flex;
    flex-direction: column;
    position: relative;
    height: fit-content;

    .hint {
        margin-top: 5px;
        font-size: 11px;
        line-height: 14px;
        opacity: 0.7;
    }

    .input-icon {
        position: absolute;
        left: 114px;
        bottom: 1px;
        background: var(--iqser-grey-5);
        height: 34px;
        width: 34px;
        border-left: 1px solid var(--iqser-inputs-border);
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        cursor: pointer;
        transition: background-color 0.25s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: var(--iqser-btn-bg);
        }

        mat-icon {
            width: 14px;
            height: 14px;
            color: var(--iqser-accent);
        }

        &.disabled {
            cursor: default;
        }
    }

    .mat-form-field-underline {
        display: none;
    }

    .mat-form-field-wrapper,
    .mat-form-field-infix {
        padding-bottom: 0;
    }

    .mat-form-field-label {
        opacity: 0.7 !important;
        color: var(--iqser-text) !important;
        transform: translateY(-1.34em) !important;
    }

    .mat-form-field-required-marker {
        display: none;
    }

    &:first-child {
        margin-top: 0;
    }

    .icon-right {
        width: 14px;
        height: 14px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .slider-row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mat-button-toggle-checked {
        background: var(--iqser-primary);
        transition: background-color 0.25s ease;
        color: var(--iqser-white);
    }

    input,
    textarea,
    mat-select {
        box-sizing: border-box;
        padding-left: 11px;
        padding-right: 11px;
        border: 1px solid var(--iqser-inputs-border);
        font-family: Inter, sans-serif;
        font-size: 13px;
        background-color: var(--iqser-background);
        color: var(--iqser-text);
        border-radius: 8px;
        outline: none;
        margin-top: 3px;
        min-height: 36px;

        &.with-icon {
            padding-right: 34px;
        }

        &:focus:not(:disabled):not(.mat-select-disabled) {
            border-color: var(--iqser-text);
        }

        &::placeholder {
            color: var(--iqser-text);
            opacity: 0.7;
        }

        &.ng-invalid.ng-touched {
            border-color: rgba(var(--iqser-primary-rgb), 0.3);

            &:focus {
                border-color: var(--iqser-primary);
            }
        }

        &:disabled,
        &.mat-select-disabled {
            background-color: var(--iqser-alt-background);
            color: rgba(var(--iqser-text-rgb), 0.3);
        }
    }

    textarea {
        line-height: 18px;
    }

    .hex-color-input {
        width: 150px;
        max-width: 150px;
    }

    mat-select, .mat-select.mat-select-disabled {
        .mat-select-trigger {
            height: 32px;
        }

        .mat-select-placeholder {
            color: rgba(var(--iqser-text-rgb), 0.4);
        }

        .mat-select-value {
            vertical-align: middle;
            color: var(--iqser-text);
        }

        .mat-select-arrow {
            color: rgba(var(--iqser-text-rgb), 0.7);
        }
    }

    textarea {
        resize: vertical;
        padding-top: 7px;
        padding-bottom: 7px;
        @include mixins.scroll-bar;

        &.has-scrollbar {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
        opacity: 0.7;
        font-size: 11px;
        letter-spacing: 0;
        line-height: 14px;
        margin-bottom: 2px;
        color: var(--iqser-text);

        &.mat-checkbox-layout {
            opacity: 1;
            margin-bottom: 0;
        }
    }

    &.required label:after {
        content: ' *';
        color: var(--iqser-primary);
    }

    &.datepicker-wrapper {
        position: relative;
        display: flex;
        margin-top: 0;
        width: 120px;

        .mat-datepicker-input {
            margin-top: 0;
            width: 120px;
        }

        .mat-datepicker-toggle {
            position: absolute;
            right: 0;
            bottom: 1px;
            color: var(--iqser-accent);

            &.mat-datepicker-toggle-active {
                color: var(--iqser-primary);
            }

            .mat-icon-button {
                width: 34px;
                height: 34px;
                line-height: 34px;
            }

            mat-icon {
                width: 14px;
                height: 17px;
            }
        }
    }

    &.w-75 {
        width: 75px;
        max-width: 75px;
    }

    &.w-110 {
        width: 110px;
        max-width: 110px;
    }

    &.w-150 {
        max-width: 150px;
        width: 150px;
    }

    &.w-160 {
        width: 160px;
        max-width: 160px;
    }

    &.w-200 {
        width: 200px;
        max-width: 200px;
    }

    &.w-250 {
        width: 250px;
        max-width: 250px;
    }

    &.w-300 {
        width: 300px;
        max-width: 300px;
    }

    &.w-400 {
        width: 400px;
        max-width: 400px;
    }

    &.w-450 {
        width: 450px;
        max-width: 450px;
    }

    &.w-full {
        width: 100%;
        max-width: 100%;
    }
}