/* ==========================================================================
   ESS Rating System
   ==========================================================================

   Components:
     .ess_rating_input
         Interactive 1–5 star rating input.

     .ess_rating_display
         Readonly rating display supporting fractional values.

   Design goals:
     - No JavaScript dependency.
     - No Livewire dependency.
     - Works with normal Blade forms.
     - Works with Livewire forms.
     - Multiple rating components can exist on the same page.
     - CSS is namespaced under .ess_rating.
     - Bootstrap can still be used around the component.
     - Supports xs / sm / md / lg sizes.

   ========================================================================== */


/* ==========================================================================
   Shared Rating Variables
   ========================================================================== */

.ess_rating {
    --ess_rating_star_empty: #dee2e6;
    --ess_rating_star_active: #ffc107;
    --ess_rating_star_hover: #ffca2c;

    --ess_rating_gap: 0.15rem;

    display: inline-flex;
}


/* ==========================================================================
   RATING INPUT
   ========================================================================== */

.ess_rating.ess_rating_input {
    /*
     * Reverse the visual order so the CSS sibling selector can
     * highlight all stars up to the selected rating.
     */
    flex-direction: row-reverse;

    justify-content: flex-end;

    align-items: center;

    gap: var(--ess_rating_gap);
}


/* --------------------------------------------------------------------------
   Hide the actual radio buttons
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_input input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* --------------------------------------------------------------------------
   Input star
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_input label {
    color: var(--ess_rating_star_empty);

    cursor: pointer;

    line-height: 1;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


/* --------------------------------------------------------------------------
   Hover state
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_input label:hover,
.ess_rating.ess_rating_input label:hover ~ label {
    color: var(--ess_rating_star_hover);
}


/* --------------------------------------------------------------------------
   Selected state
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_input input:checked ~ label {
    color: var(--ess_rating_star_active);
}


/* --------------------------------------------------------------------------
   Keyboard accessibility
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_input input:focus-visible + label {
    outline: 2px solid var(--bs-primary);

    outline-offset: 3px;

    border-radius: 0.2rem;
}


/* --------------------------------------------------------------------------
   Disabled state
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_input input:disabled ~ label {
    cursor: not-allowed;

    opacity: 0.6;
}


/* ==========================================================================
   INPUT SIZES
   ========================================================================== */

.ess_rating.ess_rating_input.ess_rating_input--xs label {
    font-size: 0.9rem;
}

.ess_rating.ess_rating_input.ess_rating_input--sm label {
    font-size: 1.25rem;
}

.ess_rating.ess_rating_input.ess_rating_input--md label {
    font-size: 1.75rem;
}

.ess_rating.ess_rating_input.ess_rating_input--lg label {
    font-size: 2.25rem;
}


/* ==========================================================================
   RATING DISPLAY
   ========================================================================== */

.ess_rating.ess_rating_display {
    /*
     * Readonly ratings are displayed left-to-right.
     */
    flex-direction: row;

    align-items: center;

    gap: 0.5rem;
}


/* --------------------------------------------------------------------------
   Star container
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_display .ess_rating_stars {
    display: inline-flex;

    align-items: center;

    gap: var(--ess_rating_gap);

    line-height: 1;
}


/* --------------------------------------------------------------------------
   Individual display star
   --------------------------------------------------------------------------

   The star is rendered using a text gradient.

   --ess_rating_fill is supplied by Blade:

       0%
       30%
       50%
       80%
       100%

   This allows values such as 4.3 and 4.5 to display accurately.
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_display .ess_rating_star {
    display: inline-block;

    /*
     * Hide the normal text color because the gradient is responsible
     * for both the filled and empty portions.
     */
    color: transparent;

    /*
     * Fill the star horizontally according to the calculated value.
     */
    background:
        linear-gradient(
            to right,
            var(--ess_rating_star_active) var(--ess_rating_fill),
            var(--ess_rating_star_empty) var(--ess_rating_fill)
        );

    /*
     * Clip the background to the shape of the star character.
     */
    background-clip: text;

    -webkit-background-clip: text;

    /*
     * Required for Chromium/WebKit browsers when using text clipping.
     */
    -webkit-text-fill-color: transparent;
}


/* --------------------------------------------------------------------------
   Numeric value
   -------------------------------------------------------------------------- */

.ess_rating.ess_rating_display .ess_rating_value {
    color: var(--bs-secondary-color);

    font-size: 0.875rem;

    line-height: 1;
}


/* ==========================================================================
   DISPLAY SIZES
   ========================================================================== */

.ess_rating.ess_rating_display.ess_rating_display--xs
.ess_rating_star {
    font-size: 0.9rem;
}

.ess_rating.ess_rating_display.ess_rating_display--sm
.ess_rating_star {
    font-size: 1rem;
}

.ess_rating.ess_rating_display.ess_rating_display--md
.ess_rating_star {
    font-size: 1.25rem;
}

.ess_rating.ess_rating_display.ess_rating_display--lg
.ess_rating_star {
    font-size: 1.75rem;
}


/* ==========================================================================
   DISPLAY VALUE SIZES
   ========================================================================== */

.ess_rating.ess_rating_display.ess_rating_display--xs
.ess_rating_value {
    font-size: 0.7rem;
}

.ess_rating.ess_rating_display.ess_rating_display--sm
.ess_rating_value {
    font-size: 0.8rem;
}

.ess_rating.ess_rating_display.ess_rating_display--md
.ess_rating_value {
    font-size: 0.875rem;
}

.ess_rating.ess_rating_display.ess_rating_display--lg
.ess_rating_value {
    font-size: 1rem;
}