@use '@justeat/fozzie/src/scss/fozzie' as f;

$form-input-bg                          : f.$color-container-default;
$form-input-bg--hover                   : darken($form-input-bg, f.$color-hover-01);

$form-input-bg--disabled                : f.$color-disabled-01;
$form-input-textColour--disabled        : f.$color-content-disabled;
$form-input-borderColour--disabled      : f.$color-disabled-01;

$form-input-fontSize                    : 'body-l';
$form-input-textColour                  : f.$color-content-default;
$form-input-secondaryTextColour         : f.$color-content-subdued;

$form-input-borderWidth                 : 1px;
$form-input-borderColour                : f.$color-border-default;
$form-input-borderRadius                : f.$radius-rounded-c;
$form-input-borderColour--invalid       : f.$color-support-error;

$form-input-focus--boxShadow            : 0 0 0 2px f.$color-focus-inner, 0 0 0 4px f.$color-focus-outer;

$form-input-padding--side               : f.spacing(d);

$form-input-height                      : f.spacing(h);
$form-input-padding                     : 11px $form-input-padding--side 13px;

$form-input-height--small               : f.spacing(g);
$form-input-padding--small              : 7px $form-input-padding--side 9px;

$form-input-height--large               : f.spacing(h);
$form-input-padding--large              : 15px $form-input-padding--side 17px;

$form-input-iconPadding                 : f.spacing(h);
$form-input-icon-horizontalIndent       : 19px;

@mixin form-field-size($height, $padding) {
    @include f.rem(height, $height);
    padding: $padding;
}

@mixin indent-icon($position, $indent: $form-input-icon-horizontalIndent) {
    svg {
        @if $position == 'leading' {
            left: $indent;
        } @else if $position == 'trailing' {
            right: $indent;
        } @else {
            bottom: $indent;
        }
    }
}

@mixin disabled-field() {
    cursor: not-allowed;
    background-color: $form-input-bg--disabled;
    color: $form-input-textColour--disabled;
    border-color: $form-input-borderColour--disabled;

    &,
    &:hover {
        background-color: $form-input-bg--disabled;
        color: $form-input-textColour--disabled;
        border-color: $form-input-borderColour--disabled;
    }
}

.c-formField {
    & + & {
        margin-top: f.spacing(d);
    }
}

.c-formField-fieldWrapper {
    position: relative;
}

.c-formField-field--small {
    @include form-field-size($form-input-height--small, $form-input-padding--small); //convert height to rem
}

.c-formField-field--medium {
    @include form-field-size($form-input-height, $form-input-padding); //convert height to rem
}

.c-formField-field--large {
    @include form-field-size($form-input-height--large, $form-input-padding--large); //convert height to rem
}

.c-formField-field,
%c-formField-field {
    width: 100%;
    font-family: f.$font-family-base;
    @include f.font-size($form-input-fontSize);
    font-weight: f.$font-weight-regular;
    color: $form-input-textColour;

    background-color: $form-input-bg;
    border: $form-input-borderWidth solid $form-input-borderColour;
    border-radius: $form-input-borderRadius;
    background-clip: padding-box;

    &:hover {
        background-color: $form-input-bg--hover;
    }

    &:focus,
    &:focus-visible,
    &:active,
    &:focus-within {
        box-shadow: $form-input-focus--boxShadow;
        outline: none;
    }

    &[disabled] {
        @include disabled-field();
    }
}

.c-formField--invalid {
    border-color: $form-input-borderColour--invalid !important;
}

.c-formField-padding--iconLeading {
    padding-left: $form-input-iconPadding;
}
