@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';

.Text {
    margin-bottom: functions.pxRem(40);
        
    @media all and (min-width: functions.em(1024)) {
        margin-bottom: functions.pxRem(100);
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.FormFields {
    display: flex;
    flex-direction: column;
    gap: functions.pxRem(40);

    &--Green {
        fill: colours.$green;
        color: colours.$green;

        .Input, .Textarea, .Select {
            border-color: colours.$green-light;

            &--HasValue, &:focus {
                border-color: colours.$green;
            }
        }
    }

    &--White {
        fill: #FFF;
        color: #FFF;

        .Input, .Textarea, .Select {
            border-color: rgba(#FFF, 0.5);

            &--HasValue, &:focus {
                border-color: #FFF;
            }
        }
    }
}

.InputRow {
    row-gap: functions.pxRem(40);
}

.InputWrap {
    width: 100%;

    @media all and (min-width: functions.em(600)) {
        flex: 1;
    }
}

.Input, .Textarea, .Select {
    width: 100%;
    display: block;
    border-radius: functions.pxRem(12);
    padding: 0.75em 1em;
    margin-top: functions.pxRem(10);
    border: functions.pxRem(1) solid;
    background-color: transparent;
    font-size: functions.pxRem(16);
    transition: background-color 0.25s, border-color 0.25s;

    @media all and (min-width: functions.em(768)) {
        padding: 1.2em 1em;
        font-size: functions.pxRem(18);
    }

    &--HasError {
        border-color: colours.$error !important;
    }

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

    &:focus {
        background-color: #FFF;
    }
}

.Textarea {
    max-width: 100%;
    min-height: 12em;
    resize: vertical
}

.SelectWrap {
    position: relative;
    margin-top: functions.pxRem(10);

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

.Select {
    padding-right: calc(2em + #{functions.pxRem(8)});
    appearance: none;

    @media all and (min-width: functions.em(768)) {
        font-size: functions.pxRem(18);
    }

    &:focus {
        background-color: #FFF;
    }
}

.SelectIcon {
    fill: colours.$green;
    width: functions.pxRem(8);
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
    pointer-events: none;
}

.SubmitButtonWrap {
    display: flex;
    justify-content: flex-end;
}

.SubmitButton {
    width: 100%;

    @media all and (min-width: functions.em(600)) {
        max-width: functions.pxRem(335);
    }
}

.Error {
    margin-top: functions.pxRem(10);
    color: colours.$error;
}