:root {
    --auction-radius: .2em;
    --auction-color-success: #2da44e;
    --auction-color-success-surface: #edf7ed;
    --auction-color-info: #1f6feb;
    --auction-color-info-surface: #eef6ff;
    --auction-color-warning: #d97706;
    --auction-color-warning-surface: #fff8e6;
    --auction-color-error: #cf222e;
    --auction-color-error-surface: #fff1f0;
    --auction-color-muted: #666;
    --auction-price-font-weight: 500;
    --auction-button-text-color: #fff;
    --auction-button-font-weight: 500;
    --auction-button-min-height: 2.5em;
    --auction-button-padding: .5em 1em;
    --auction-button-background-color: var(--auction-color-info);
    --auction-button-border-color: var(--auction-color-info);
    --auction-listing-font-size: .75rem;
    --auction-listing-color: CanvasText;
    --auction-category-color: CanvasText;
}

.auction-listing {
    color: var(--auction-listing-color);
    font-size: var(--auction-listing-font-size);
}

.auction-listing + .product__data {
    display: none;
}

.auction-category {
    color: var(--auction-category-color);
    margin-top: .5rem;
}

.auction-category__message {
    margin-top: .5rem;
    max-width: 50ch;
}

.auction-category__auth {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.auction-button {
    font-weight: var(--auction-button-font-weight);
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: var(--auction-button-min-height);
    padding: var(--auction-button-padding);
    border-radius: var(--auction-radius);
    border: 0;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}

a.auction-button,
a.auction-button:hover,
a.auction-button:active {
    color: var(--auction-button-text-color);
}


.auction-button_solid {
    background-color: var(--auction-button-background-color);
    color: var(--auction-button-text-color);
}

.auction-button_outline {
    --auction-button-text-color: var(--auction-button-border-color);
    border: 1px solid var(--auction-button-border-color);
    color: var(--auction-button-text-color);
}


.auction-timer__label {
    font-size: 1rem;
    opacity: 0.5;
}

.auction-timer__value {
    font-size: 1.25rem;
}

.auction-message {
    padding: .25em .5em;
    border: 1px solid color-mix(in oklch, var(--auction-message-border-color) 25%, transparent);
    border-radius: var(--auction-radius);
    background: var(--auction-message-surface);
    color: var(--auction-message-color);
    text-align: center;
    line-height: 1.25;
}


.auction-message:empty {
    display: none;
}

.auction-message_inline {
    display: inline-block;
}

.auction-message_info {
    --auction-message-surface: var(--auction-color-info-surface);
    --auction-message-border-color: var(--auction-color-info);
    --auction-message-color: var(--auction-color-info);
}

.auction-message_warning {
    --auction-message-surface: var(--auction-color-warning-surface);
    --auction-message-border-color: var(--auction-color-warning);
    --auction-message-color: var(--auction-color-warning);
}

.auction-message_success {
    --auction-message-surface: var(--auction-color-success-surface);
    --auction-message-border-color: var(--auction-color-success);
    --auction-message-color: var(--auction-color-success);
}

.auction-message_error {
    --auction-message-surface: var(--auction-color-error-surface);
    --auction-message-border-color: var(--auction-color-error);
    --auction-message-color: var(--auction-color-error);
}

.auction-message_muted {
    --auction-message-surface: transparent;
    --auction-message-border-color: transparent;
    --auction-message-color: var(--auction-color-muted);
}

.auction-listing {
    margin-top: .5rem;
}

.auction-listing__message {
    font-size: 0.75rem;
    margin-top: .5em;
}

.auction-listing__message-note {
    margin-top: 0.35rem;
    opacity: 0.85;
}

.auction-prices {
    text-align: center;
}

.auction-prices__label {
    opacity: .5;
}

.auction-prices__value {
    font-size: 1.5em;
    font-weight: var(--auction-price-font-weight);
    white-space: nowrap;
}

.auction-prices__value .price,
.auction-prices__value .ruble {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}