@import '../shared-styles/index';

$selected-box-shadow: 0 -2px 0 0;
$default-box-shadow: 0 -1px 0 0;

:host {
    display: block;

    .nx-code-input__field {
        @include type-style(code-input);
        color: v(code-input-color);
        margin: 0 nx-spacer(3xs);
        text-align: center;
        border: 0;
        outline: 0;
        caret-color: v(code-input-active-color);
        box-shadow: inset $default-box-shadow v(code-input-color);
        //this is needed for the box-shadow to be visible on iOS
        -webkit-appearance: none;
        width: nx-spacer(2m);
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-sizing: border-box;

        &:focus {
            margin-bottom: -nx-border-size(xs);
            color: v(code-input-active-color);
            box-shadow: inset $selected-box-shadow v(code-input-active-color);
        }
    }

    .nx-code-input__field:first-child {
        margin-left: 0;
    }

    .nx-code-input__field:last-child {
        margin-right: 0;
    }

    .nx-code-input--field-with-gap {
        margin-left: 20px;
    }

    &:focus {
        // This will ensure there is no second focus style shown in high contrast mode
        outline: none;
    }

    [dir='rtl'] & {
        .nx-code-input__field:first-child {
            margin-right: 0;
            margin-left: nx-spacer(3xs);
        }

        .nx-code-input__field:last-child {
            margin-left: 0;
            margin-right: nx-spacer(3xs);
        }

        .nx-code-input--field-with-gap {
            margin-left: nx-spacer(3xs);
            margin-right: 20px;
        }
    }
}

:host.is-negative {
    .nx-code-input__field {
        caret-color: v(negative);
        box-shadow: inset $default-box-shadow v(negative);
        color: v(negative);

        &:focus {
            box-shadow: inset $selected-box-shadow v(negative);
        }
    }
}

:host.has-error {
    &:not(.is-negative) {
        .nx-code-input__field {
            margin-bottom: -nx-border-size(xs);
            font-weight: nx-font-weight(bold);
            color: v(code-input-error-color);
            box-shadow: inset $default-box-shadow v(code-input-error-color);

            &:focus {
                box-shadow: inset $selected-box-shadow v(code-input-error-color);
            }
        }
    }

    &.is-negative {
        .nx-code-input__field {
            font-weight: nx-font-weight(bold);
        }
    }
}

:host.is-disabled {
    cursor: not-allowed;

    .nx-code-input__field {
        cursor: not-allowed;
        color: v(code-input-disabled-color);
        box-shadow: inset $default-box-shadow nx-theme-color(code-input-disabled-color);
        box-shadow: inset $default-box-shadow v(code-input-disabled-color);
    }
}

:host.is-disabled.is-negative {
    .nx-code-input__field {
        color: v(negative-02-dimmed);
        box-shadow: inset $default-box-shadow v(negative-02-dimmed);
    }
}

// remove the number spinners on Mozilla and Chrome
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'],
.nx-code-input__field[type='number'] {
    -moz-appearance: textfield;
}

@media screen and (forced-colors: active) {
    .nx-code-input__field {
        border-bottom: 1px solid buttonText !important;

        &:focus {
            border-bottom: 2px solid highlight !important;
        }
    }

    :host.is-disabled {
        .nx-code-input__field {
            border-bottom: 1px solid GrayText !important;
        }
    }
}

@media screen and (forced-colors: active) {
    .nx-code-input__field {
        box-shadow: inset $default-box-shadow buttonText;

        &:focus {
            box-shadow: inset $selected-box-shadow buttonText;
        }
    }

    :host.is-disabled {
        .nx-code-input__field {
            color: GrayText;
            box-shadow: inset $default-box-shadow GrayText;
            opacity: 1;
        }
    }
}
