@use "sass:math";
@import "../variables/variables";

/* Calculate hypotenuse of a 28px square (for rotation). */
/* Formula is: sqrt(pow(28px, 2) / 2) */
/* Heights defined in this should not use variables. This is because they are specific to legal requirements and should not change */

$eek-arrow-size: #{math.sqrt(392)}px;
/* These are custom colors not part of ebay palette */
$eek-rating-color-1: #00a650;
$eek-rating-color-2: #4dbd38;
$eek-rating-color-3: #b3db18;
$eek-rating-color-4: #fff200;
$eek-rating-color-5: #fab20b;
$eek-rating-color-6: #f25c19;
$eek-rating-color-7: #ed1c24;
$eek-color: #000;
$eek-background-color: #fff;
$eek-border-color: $eek-color;

.eek {
    align-items: stretch;
    display: inline-flex;

    // TODO remove flex-direction next major version and swap markup to be icon first
    flex-direction: row-reverse;
    font-family: Arial, sans-serif;
    font-weight: 700;
    height: 24px;
    position: relative;
}

.eek--large {
    height: 32px;
}

.eek__container {
    align-items: center;
    border: 1px solid $eek-color;
    border-left: none;
    border-radius: 0 2px 2px 0;
    display: inline-flex;

    // TODO remove flex-direction next major version and swap markup to be icon first
    flex-direction: row-reverse;
}

.eek .icon--eek-arrow {
    rotate: 180deg;
    width: 9px;
}

.eek--large .icon--eek-arrow {
    width: 12.5px;
}

.eek__arrow {
    overflow: hidden;
    width: 17px;
}

.eek__arrow::before {
    border: 0.5px solid $eek-color;
    border-radius: 2px;
    content: "";
    display: block;
    height: $eek-arrow-size;
    margin-block-start: 2.3px;
    position: relative;
    right: 12px;
    transform: rotate(45deg);
    width: $eek-arrow-size;
}

.eek--rating-1 .eek__container {
    background: $eek-rating-color-1;
}
.eek--rating-1 svg.icon--eek-arrow {
    fill: $eek-rating-color-1;
}

.eek--rating-2 .eek__container {
    background: $eek-rating-color-2;
}
.eek--rating-2 svg.icon--eek-arrow {
    fill: $eek-rating-color-2;
}

.eek--rating-3 .eek__container {
    background: $eek-rating-color-3;
}
.eek--rating-3 svg.icon--eek-arrow {
    fill: $eek-rating-color-3;
}

.eek--rating-4 .eek__container {
    background: $eek-rating-color-4;
}
.eek--rating-4 svg.icon--eek-arrow {
    fill: $eek-rating-color-4;
}

.eek--rating-5 .eek__container {
    background: $eek-rating-color-5;
}
.eek--rating-5 svg.icon--eek-arrow {
    fill: $eek-rating-color-5;
}

.eek--rating-6 .eek__container {
    background: $eek-rating-color-6;
}
.eek--rating-6 svg.icon--eek-arrow {
    fill: $eek-rating-color-6;
}

.eek--rating-7 .eek__container {
    background: $eek-rating-color-7;
}
.eek--rating-7 svg.icon--eek-arrow {
    fill: $eek-rating-color-7;
}

.eek__rating {
    color: $eek-background-color;
    display: inline-block;
    font-size: 18px;
    margin-inline-end: 8px;
    text-shadow:
        -0.5px 0.5px 0 $eek-color,
        0.5px 0.5px 0 $eek-color,
        0.5px -0.5px 0 $eek-color,
        -0.5px -0.5px 0 $eek-color;
}

.eek--large .eek__rating {
    font-size: 24px;
}

.eek__rating-range {
    align-items: center;
    background-color: $eek-background-color;
    border-radius: 1px 0 0 1px;
    display: inline-flex;
    flex-direction: column;
    height: 20px;
    margin: 1px;
    padding: 0 1px;
}

.eek--large .eek__rating-range {
    height: 28px;
}

.eek__rating-range > .icon--eek-range-arrow {
    height: 6px;
    width: 5px;
}

.eek--large .eek__rating-range > .icon--eek-range-arrow {
    height: 7px;
    width: 6px;
}

.eek__rating-range > span {
    font-size: 8px;
    height: 8px;
}

.eek--large .eek__rating-range > span {
    font-size: 10px;
    height: 10px;
}

/*
In Safari the EEK icon is not aligned properly as well as the text is broken
Changed a bit of styles there only in order to make it work
*/
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix,media-feature-range-notation */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .eek__rating {
            text-shadow: none;
            -webkit-text-stroke: 0.5px;
            -webkit-text-stroke-color: $eek-color;
        }
    }
}

[dir="rtl"] {
    .eek {
        // Since this is a legal requirement component, we need to ensure that the text is always left-to-right
        direction: ltr;
    }
}
