common-ui/src/assets/styles/common-inputs.scss

@use 'common-mixins' as mixins;

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

iqser-dynamic-input {
    display: flex;
}

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 0;
    padding-bottom: 0;
    min-height: var(--iqser-inputs-height);
}

.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-outline);
        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;
        }
    }

    &: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);
    }

    .mat-mdc-text-field-wrapper {
        padding: 0;
    }

    .mdc-text-field {
        background: var(--iqser-background);
    }

    input:not([type='checkbox']),
    textarea {
        box-sizing: border-box;
        margin-top: 3px;
        min-height: var(--iqser-inputs-height);
        line-height: 32px;
        padding-left: 11px;
        padding-right: 11px;
    }

    .mat-mdc-form-field {
        margin-top: 3px;

        input {
            margin-top: 0;
        }
    }

    .mat-mdc-form-field-subscript-wrapper {
        display: none;
    }

    .mdc-text-field--outlined {
        --mdc-shape-small: 8px; // border-radius
    }

    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
        .mdc-notched-outline__leading,
        .mdc-notched-outline__trailing {
            border-color: var(--iqser-inputs-outline);
        }

        &:hover {
            .mdc-notched-outline__leading,
            .mdc-notched-outline__trailing {
                border-color: var(--iqser-inputs-outline);
            }
        }
    }

    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused {
        .mdc-notched-outline__leading,
        .mdc-notched-outline__trailing {
            border-color: var(--iqser-text);
        }

        &:hover {
            .mdc-notched-outline__leading,
            .mdc-notched-outline__trailing {
                border-color: var(--iqser-text);
            }
        }
    }

    .mdc-text-field--focused .mdc-notched-outline__leading,
    .mdc-text-field--focused .mdc-notched-outline__notch,
    .mdc-text-field--focused .mdc-notched-outline__trailing {
        border-width: 1px;
    }

    input,
    textarea {
        border: 1px solid var(--iqser-inputs-outline);
        font-family: var(--iqser-font-family);
        font-size: var(--iqser-font-size);
        background-color: var(--iqser-background);
        color: var(--iqser-text);
        border-radius: 8px;
        outline: none;

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

        &:focus:not(: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);
            }
        }
    }

    input:disabled,
    textarea:disabled,
    .mdc-text-field--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;
    }

    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;
            }

            .mat-mdc-icon-button svg {
                width: unset;
                height: unset;
            }
        }
    }

    &.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%;
    }
}