.pricepicker {
    display: flex;
    flex-direction: column-reverse;

    &:hover {
        transform: translateY(-1px);
    }

    &:focus-within {
        transform: translateY(1px);
    }

    & > .pricepicker-inputs {
        display: flex;

        min-height: 2.25rem;
        border: var(--bdr-input);
        border-radius: var(--bdr-rounded);

        box-shadow: var(--shadow-mid);

        transition: var(--transition-easeinout-fast);

        .pricepicker:has(.pricepicker-inputs:hover) & {
            border-color: var(--clr-input-border-hover);
            box-shadow: var(--shadow-high);
        }

        .pricepicker:has(.pricepicker-inputs:focus-within) & {
            border-color: var(--clr-input-border-focused);
            box-shadow: var(--shadow-low);
        }

        & > .pricepicker-input {
            flex: 1;

            width: 5rem;
            padding: 0.25rem 0.75rem;
            border: none;

            text-align: right;

            background: transparent;
            outline: none;

            transition: var(--transition-easeinout-fast);

            &::placeholder {
                color: var(--clr-text-muted);
            }

            &:focus {
                background-color: hsl(from var(--clr-primary) h s l / 10%);
            }

            &.pricepicker-min {
                border-right: 1px solid var(--clr-input-border);
                border-radius: var(--bdr-rounded) 0 0 var(--bdr-rounded);
            }

            &.pricepicker-max {
                border-radius: 0 var(--bdr-rounded) var(--bdr-rounded) 0;
            }
        }
    }

    & > .pricepicker-header {
        display: flex;
        gap: 1rem;
        align-items: start;
        justify-content: space-between;

        padding: 0.5rem 0.5rem 0.25rem;

        & > .pricepicker-label {
            user-select: none;
            font-weight: var(--font-bold);
            transition: var(--transition-easeinout-fast);

            .pricepicker:has(.pricepicker-inputs:hover) & {
                color: var(--clr-input-text-hover);
            }

            .pricepicker:has(.pricepicker-inputs:focus-within) & {
                color: var(--clr-input-text-focused);
            }
        }

        & > .pricepicker-range-display {
            font-size: medium;
            color: var(--clr-text-muted);
        }
    }
}