.currency-input {
    .currency-input-control {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        background-color: var(--white);
        border: 1px solid var(--border-200);
        .border-radius(@form-border-radius);
        .box-shadow(@form-box-shadow);
        transition:
            border-color 150ms ease,
            box-shadow 150ms ease;

        .currency-input-status-icon.error {
            &:before {
                color: var(--error-main);
                font-size: 14px;
            }
        }
        &:hover:not(.disabled) {
            border-color: var(--border-300, var(--border-200));
        }

        &:focus-within:not(.disabled) {
            border-color: var(--primary-main, #2970ff);
            box-shadow: @form-focus-box-shadow;
        }

        &.disabled {
            pointer-events: none;
            background-color: var(--bg-50);

            .currency-input-symbol,
            .currency-input-field,
            .currency-input-select-value {
                color: var(--text-300);
            }
        }

        &.field-invalid {
            border-color: var(--error-main) !important;

            &:focus-within {
                box-shadow: @form-focus-error-box-shadow;
            }
        }
    }

    .currency-input-symbol {
        flex-shrink: 0;
        padding-left: 0.75rem;
        font-size: @form-font-size;
        font-weight: @font-weight-semibold;
        color: var(--grey-600);
        pointer-events: none;
    }

    .currency-input-field {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        padding: 0 0.5rem;
        border: none;
        outline: none;
        background: transparent;
        color: inherit;
        font-family: @form-font-family;
        font-size: @form-font-size;
        font-weight: @form-font-weight;
        box-shadow: none;

        &:focus,
        &:focus-visible {
            outline: none;
            box-shadow: none;
        }

        &::placeholder {
            color: var(--text-300);
        }
        // Hide number input spinner arrows
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        &[type='number'] {
            -moz-appearance: textfield;
            appearance: textfield;
        }
    }

    .currency-input-status-icon {
        flex-shrink: 0;
        margin-right: 0.5rem;
        display: inline-flex;
        align-items: center;
        font-size: 18px;
        line-height: 1;

        &.error {
            color: var(--error-main);
        }
    }

    .field-tooltip-icon {
        margin-right: 0.5rem;
    }

    .currency-input-select {
        position: relative;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        align-items: stretch;
    }

    .currency-input-select-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 100%;
        padding: 0 0.75rem;
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: @form-font-family;
        font-size: @form-font-size;
        font-weight: @font-weight-medium;
        color: inherit;

        &:disabled {
            cursor: default;
        }
    }

    .currency-input-caret {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid var(--text-300);
        transition: transform 150ms ease;

        .open & {
            transform: rotate(180deg);
        }
    }

    .currency-input-hint {
        display: block;
        margin-top: 0.25rem;
        font-size: @font-size-xs;
        line-height: 1.4;
        color: var(--text-300);
    }
}

// Menu is rendered through a portal into document.body, so its styles must live
// at the top level rather than nested under .currency-input.
.currency-input-menu {
    position: absolute;
    top: ~'calc(100% + 6px)';
    right: 0;
    min-width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    z-index: @zindex-dropdown;
    background: var(--white);
    border: 1px solid var(--border-200);
    .border-radius(@form-border-radius);
    .box-shadow(0 4px 12px 0 rgba(16, 24, 40, 0.12));
    max-height: 240px;
    overflow-y: auto;

    &.currency-input-menu--portal {
        position: fixed;
        top: auto;
        z-index: @zindex-modal;
    }
}

.currency-input-option {
    padding: 0.5rem 0.75rem;
    font-size: @font-size-sm;
    cursor: pointer;
    white-space: nowrap;

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

    &.selected {
        font-weight: @font-weight-semibold;
        background: var(--bg-50);
    }
}