/*main source from: https://uiverse.io/namecho/quiet-panther-93*/

.switch {
    direction: ltr;

    --button-width: 3.5em;
    --button-height: 2em;
    --toggle-diameter: 1.5em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: #ccc;
    --color-green: var(--primary-color);

    display: inline-flex;
    align-items: center;

    cursor: pointer;
}

.switch:dir(rtl) {
    rotate: 180deg !important;
}

.switch:hover {}

.switch .slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.switch .slider::after {
    background-image: url('/fire-icon.svg');
    /* The image used */
    background-color: #fff;
    /* You must set a specified height */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: 16px 16px;

    rotate: 180deg;
    right: 0;
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    /* background-color: #fff; */
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked+.slider {
    background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked+.slider::after {
    background-image: url('/fire-icon-color.svg');
    /* The image used */
    background-color: #fff;
    /* You must set a specified height */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: 16px 16px;

    rotate: 180deg;
    right: 0;
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    /* background-color: #fff; */
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));


    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]:active+.slider::after {
    width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}



/* switch 2 */

.switch2 {
    direction: ltr;

    --button-width: 3.5em;
    --button-height: 2em;
    --toggle-diameter: 1.5em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: #ccc;
    --color-green: var(--primary-color);

    display: inline-flex;
    align-items: center;

    cursor: pointer;
}

.switch2:dir(rtl) {
    rotate: 180deg !important;
}

.switch2:hover {}

.switch2 .slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.switch2 .slider::after {
    background-image: url('/like-gray.svg');
    /* The image used */
    background-color: #fff;
    /* You must set a specified height */
    background-position: 4px 5.5px;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: 16px;

    rotate: 180deg;
    right: 0;
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    /* background-color: #fff; */
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.switch2 input[type="checkbox"]:checked+.slider {
    background-color: var(--color-green);
}

.switch2 input[type="checkbox"]:checked+.slider::after {
    /* background-color: red; */
    background-image: url('/heart-fill.svg');
    /* The image used */
    background-color: #fff;
    /* You must set a specified height */
    background-position: 4px 5.5px;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: 16px;
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch2 input[type="checkbox"] {
    display: none;
}

.switch2 input[type="checkbox"]:active+.slider::after {
    width: var(--toggle-wider);
}

.switch2 input[type="checkbox"]:checked:active+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}




.comp-link {
    position: relative;
    width: 32px;
    height: 32px;
    border: 3px solid #ccc !important;
    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: red; */
    background-image: url('/arrow.svg');
    /* The image used */
    background-color: #ccc;
    /* You must set a specified height */
    background-position: 5px 5.5px;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: 16px;
}

.comp-link:hover {
    background-color: #eba607;
    border: 3px solid #eba607 !important;
}

.comp-link .badge {
    position: absolute;
    right: -11px;
    padding: 0;
    width: 16px;
    height: 16px;
    top: -2.5px;
    font-size: 12px;
    border-radius: 50%;
    background-color: #111f4c;
    color: #fff;
    transition: all 0.2s ease;
    align-content: center;
}