:root {
    --pixel-box-calculator-primary: #31c954;
    --pixel-box-calculator-secondary: #121d47;
    --pixel-box-calculator-border-radius: 4px;
    --pixel-box-calculator-input-background: #f5f5f5;
    --pixel-box-calculator-background: var(--wc-content-bg, #ffffff);
    --pixel-box-calculator-background-accent: color-mix(in oklab, var(--pixel-box-calculator-secondary) 10%, var(--pixel-box-calculator-background) 90%);
    --pixel-box-calculator-text-light: var(--pixel-box-calculator-background);
}

.pixel_box_calculator {
    position: relative;
}

.pixel_box_calculator_results_wrapper,
.pixel_box_calculator_loading,
.pixel_box_calculator_no_results,
.pixel_box_calculator_results {
    display: none;
}

.pixel_box_calculator_visible {
    display: flex;
    flex-direction: column;
}

.pixel_box_calculator_results_relative {
    position: relative;
    margin-top: 4px;
}

.pixel_box_calculator_results_absolute {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 1;
}

.pixel_box_calculator_results_wrapper {
    background-color: var(--pixel-box-calculator-background);
    border: 1px solid var(--pixel-box-calculator-secondary);
}

.pixel_box_calculator_no_results, .pixel_box_calculator_loading {
    align-items: center;
    padding: 1em;
}

.pixel_box_calculator_loading {
    flex-direction: row;
    justify-content: center;
}

.pixel_box_calculator_result {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: 1em;
}

.pixel_box_calculator_result:hover, .pixel_box_calculator_result:focus-visible {
    background-color: var(--pixel-box-calculator-background-accent);
}

.pixel_box_calculator_result_image {
    width: 4em;
    height: 4em;
}

.pixel_box_calculator_result_title {
    font-size: 1.1em;
    flex-grow: 1;
    margin-bottom: 0;
}

.pixel_box_calculator_close {
    position: absolute;
    right: 0;
    bottom: 100%;

    display: flex;
    align-items: end;
}

.pixel_box_calculator_close .button {
    border-radius: var(--pixel-box-calculator-border-radius) var(--pixel-box-calculator-border-radius) 0 0 !important;
    border: none;
    background-color: var(--pixel-box-calculator-secondary);
    color: var(--pixel-box-calculator-text-light);
    transform: translateX(1px);
    padding: .5em 1em;
}

.pixel_box_calculator_inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: end;
}

.pixel_box_calculator_inputs input {
    background-color: var(--pixel-box-calculator-input-background);
    border: 1px solid var(--pixel-box-calculator-input-background);
    padding: .9em;
    appearance: none;
    border-radius: var(--pixel-box-calculator-border-radius);
}

.pixel_box_calculator_inputs label {
    display: block;
}

.pixel_box_calculator_loading_indicator {
    width: 20px;
    aspect-ratio: 1;

    margin-right: .5em;

    --c: no-repeat linear-gradient(var(--pixel-box-calculator-primary) 0 0);
    /* @formatter:off */
    background: var(--c) 0 100%,
                var(--c) 50% 100%,
                var(--c) 100% 100%;
    /* @formatter:on */
    background-size: 20% 65%;
    animation: pixel_box_calculator_loading_animation 1s infinite linear;

}

@keyframes pixel_box_calculator_loading_animation {
    /* @formatter:off */
    20% { background-position: 0  50%, 50% 100%, 100% 100% }
    40% { background-position: 0    0, 50%  50%, 100% 100% }
    60% { background-position: 0 100%, 50%    0, 100% 50%  }
    80% { background-position: 0 100%, 50% 100%, 100% 0    }
    /* @formatter:on */
}