/* tooltip */
.tooltip {
    --max-width-tooltip: 14.8125rem;

    display: flex;
    align-items: center;
    gap: 0.125rem;
    width: fit-content;
    position: relative;
    pointer-events: all;
}
.tooltip-text {
    vertical-align: super;
    display: inline-flex;
    flex-direction: column;
}
.tooltip-text__btn {
    display: block;
    width: 1rem;
    height: 1rem;
}
.tooltip-text__btn svg {
    display: block;
    width: 100%;
    height: 100%;
}
.tooltip__caption {
    color: var(--color-text);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}
.tooltip__icon,
.tooltip__body-icon {
    color: var(--color-text);
    display: block;
    border-radius: 50%;
    transition: var(--transition);
}
.tooltip__icon {
    min-width: calc(var(--size-icon) / 2);
    width: calc(var(--size-icon) / 2);
    min-height: calc(var(--size-icon) / 2);
    height: calc(var(--size-icon) / 2);
}
.tooltip__body-icon {
    min-width: var(--size-icon);
    width: var(--size-icon);
    min-height: var(--size-icon);
    height: var(--size-icon);
}
.tooltip__body-icon svg,
.tooltip__icon svg,
.tooltip__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tooltip__wrapper {
    transition: 0.2s opacity, 0.2s padding;
    z-index: 15;
    width: fit-content;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    position: absolute;
    bottom: 0;
    left: calc(50% + var(--offset-tooltip, 0px));
    transform: translateY(100%) translateX(calc(-50% - 0.0625rem));
    max-width: var(--max-width-tooltip);
    min-width: var(--max-width-tooltip);
    width: max-content;
}
.tooltip__item {
    background-color: var(--color-muted);
    padding: var(--offset-small);
    display: flex;
    flex-direction: column;
    gap: var(--offset-small);
}
.tooltip__item-image {
    width: 100%;
    overflow: hidden;
}
.tooltip__item-image img {
    object-fit: contain;
    width: 100%;
}
.tooltip__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: var(--transition);
    background-color: var(--color-extralight);
    
    border-radius: var(--radius);
    position: relative;
    font-size: var(--font-size-tooltip, 0.75rem);
    padding: var(--offset-secondary);
    color: var(--color-text-dark);
}

.tooltip__body-title {
    font-weight: var(--font-semibold);
}

/**/
.tooltip__list {
    padding: 0.375rem 0;
    display: flex;
    flex-direction: column;
}
.tooltip__list-link {
    display: flex;
    align-items: center;
    gap: calc(var(--offset-small) / 2);
    padding: 0.375rem var(--offset-small);
    width: 100%;
}
.tooltip__list-link svg {
    display: block;
    min-width: var(--size-icon);
    width: var(--size-icon);
    min-height: var(--size-icon);
    height: var(--size-icon);
}
.tooltip__list-item._danger .tooltip__list-link {
    color: var(--color-error);
}
/**/
.tooltip__close {
    position: absolute;
    top: var(--offset-extrasmall);
    right: var(--offset-extrasmall);
    min-width: var(--size-icon-medium);
    width: var(--size-icon-medium);
    min-height: var(--size-icon-medium);
    height: var(--size-icon-medium);
    color: var(--color-text-muted-dark);
}
.tooltip__btn {
    min-width: 1rem;
    min-height: 1rem;
    width: 1rem;
    height: 1rem;
}
.tooltip__btn svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* oval */
.tooltip:not(.tooltip_oval) .tooltip__body::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: var(--color-extralight);
    position: absolute;
    top: 0;
    left: calc(50% - var(--offset-tooltip, 0px));
    transform: rotate(45deg) translateX(-50%);
    border-radius: 0.125rem;
}

.tooltip:not(.tooltip_hover)._active .tooltip__wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    padding: 0.625rem 0;
}
.tooltip:not(.tooltip_hover)._active .button_outlined-muted {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-text-extralight);
    --btn-border: var(--color-primary);
}

/* top */
.tooltip.tooltip_top .tooltip__wrapper {
    top: 0;
    bottom: auto;
    transform: translateY(-100%) translateX(calc(-50% - 0.0625rem));
}
.tooltip.tooltip_top:not(.tooltip_oval) .tooltip__body::before {
    top: auto;
    bottom: -0.5rem;
}

/* right */
.tooltip.tooltip_right .tooltip__wrapper {
    left: auto;
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(calc(-50% - 0.125rem)) translateX(100%);
}
.tooltip.tooltip_right:not(.tooltip_oval) .tooltip__body::before {
    top: 50%;
    left: 0;
}

/* left */
.tooltip.tooltip_left .tooltip__wrapper {
    left: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(calc(-50% - 0.125rem)) translateX(-100%);
}
.tooltip.tooltip_left:not(.tooltip_oval) .tooltip__body::before {
    top: 50%;
    left: auto;
    right: -0.5rem;
}

/* top left */
.tooltip.tooltip_top-left .tooltip__wrapper {
    top: 0;
    left: var(--offset-tooltip, 0px);
    bottom: auto;
    transform: translateY(-100%);
}
.tooltip.tooltip_top-left:not(.tooltip_oval) .tooltip__body::before {
    top: auto;
    bottom: -0.5rem;
    left: calc(var(--offset-secondary) - var(--offset-tooltip, 0px));
}
.tooltip.tooltip_top-left:not(.tooltip_hover)._active .tooltip__wrapper {
    padding-left: 0;
    padding-right: 0;
}

/* top right */
.tooltip.tooltip_top-right .tooltip__wrapper {
    top: 0;
    bottom: auto;
    left: auto;
    right: var(--offset-tooltip, 0px);
    transform: translateY(-100%);
}
.tooltip.tooltip_top-right:not(.tooltip_oval) .tooltip__body::before {
    top: auto;
    left: auto;
    bottom: -0.5rem;
    right: calc(var(--offset-tooltip, 0px) * -1);
}
.tooltip.tooltip_top-right:not(.tooltip_hover)._active .tooltip__wrapper {
    padding-right: 0;
    padding-left: 0;
}

/* bottom left */
.tooltip.tooltip_bottom-left .tooltip__wrapper {
    top: auto;
    left: var(--offset-tooltip, 0px);
    bottom: 0;
    transform: translateY(100%);
}
.tooltip.tooltip_bottom-left:not(.tooltip_oval) .tooltip__body::before {
    top: 0;
    bottom: auto;
    left: calc(var(--offset-tooltip, 0px) * -1);
}
.tooltip.tooltip_bottom-left:not(.tooltip_hover)._active .tooltip__wrapper {
    padding-left: 0;
    padding-right: 0;
}

/* bottom right */
.tooltip.tooltip_bottom-right .tooltip__wrapper {
    top: auto;
    bottom: 0;
    left: auto;
    right: var(--offset-tooltip, 0px);
    transform: translateY(100%);
}
.tooltip.tooltip_bottom-right:not(.tooltip_oval) .tooltip__body::before {
    top: 0;
    left: auto;
    bottom: auto;
    right: calc(var(--offset-tooltip, 0px) * -1);
}
.tooltip.tooltip_bottom-right:not(.tooltip_hover)._active .tooltip__wrapper {
    padding-right: 0;
    padding-left: 0;
}

/**/
.tooltip__body-light {
    background-color: var(--color-greige);
    color: var(--color-text);
}
.tooltip:not(.tooltip_oval) .tooltip__body.tooltip__body-light::before {
    background-color: var(--color-greige);
}


/* hover */ 
@media screen and (min-width: 1024px) {
    .tooltip_hover .tooltip__close {
        display: none;
    }
    .tooltip_hover:hover .tooltip__wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        padding: 1.25rem 0;
    }
    .tooltip:hover .tooltip__icon,
    .tooltip:hover .tooltip__caption,
    .tooltip__close:hover {
        color: var(--color-text);
    }
    .tooltip__list-link:hover {
        background-color: var(--color-muted);
    }

    /* top left */
    .tooltip_top-left.tooltip_hover:hover .tooltip__wrapper {
        padding-left: 0;
    }
}  

.tooltip__close:active {
    color: var(--color-text-dark);
}

@media screen and (max-width: 1023.5px) {
    .tooltip {
        --max-width-tooltip: 21.4375rem;
    }

    .tooltip_hover._active .tooltip__wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        padding: 0.75rem 0;
    }
    .tooltip.tooltip_oval .tooltip__title {
        padding-right: 2rem;
    }
    /* top left */
    .tooltip_top-left.tooltip_hover._active .tooltip__wrapper {
        padding-left: 0;
    }
}
@media screen and (max-width: 767px) {
    
    .tooltip__item {
        gap: var(--offset-extrasmall);
    }
    .tooltip__item-descr {
        font-size: 0.875rem;
    }
}
@media screen and (max-width: 424px) {
    .tooltip {
        --max-width-tooltip: 15rem;
    }
}
@media screen and (max-width: 1439px) {
    .tooltip__wrapper {
        /* display: none; */
    }
}




/* tooltip-hint */
.tooltip-hint {
    --offset-tooltip: var(--offset-medium);
    --width-checks: 12.5rem;
    --height-checks: 12.5rem;

    box-shadow: var(--shadow-dropdown);
    border-radius: var(--radius-medium);
    background-color: var(--color-grey-32);
    color: var(--color-extralight);
    font-weight: var(--font-regular);
    max-width: 100vw;
    width: fit-content;
    position: fixed;
    top: 0;
    left: 0;

    transition: 0.2s opacity, 0.2s transform;
    pointer-events: none;
    opacity: 0;
    z-index: 995;
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-width: none;

    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.tooltip-hint::-webkit-scrollbar,
.tooltip-hint::-webkit-scrollbar-track,
.tooltip-hint::-webkit-scrollbar-thumb {
    display: none;
}

/* descr */
.tooltip-hint__body {
    padding: var(--offset-secondary);
    display: flex;
    flex-direction: column;
    min-width: var(--width-hint, 15.625rem);
}
.tooltip-hint__caption {
    font-size: 0.75rem;
    color: var(--color-grey-2);
}
.tooltip-hint__descr:not(:first-child) {
    margin-top: var(--offset-secondary);
}


/* tooltip list */
.tooltip-hint__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.tooltip-hint__item {
    width: 100%;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.tooltip-hint__link {
    padding: var(--offset-extrasmall) var(--offset-small);
    display: flex;
    align-items: center;
    gap: var(--offset-extrasmall);
    width: 100%;
    text-align: left;
    transition: var(--transition);
}
.tooltip-hint__link svg {
    display: block;
    min-width: var(--size-icon);
    width: var(--size-icon);
    min-height: var(--size-icon);
    height: var(--size-icon);
}
.tooltip-hint__link span {
    width: 100%;
    white-space: wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* tooltip checks */
.tooltip-hint__checks {
    width: var(--width-checks);
    max-height: var(--height-checks);

    padding: var(--offset-tooltip);
    margin-right: calc(var(--offset-tooltip) / 2);
    font-size: 0.875rem;
    line-height: 1.15;

    display: flex;
    flex-direction: column;
    gap: var(--offset-extrasmall);
    overflow-y: auto;
    scrollbar-width: 0.25rem;
    /* scrollbar-color: var(--color-primary) var(--color-muted); */
}
.tooltip-hint__checks::-webkit-scrollbar {
    width: 0.25rem;
    background-color: var(--color-muted);
}
.tooltip-hint__checks::-webkit-scrollbar-thumb {
    width: 0.25rem;
    border-radius: 0.25rem;
    background-color: var(--color-primary);
}
.tooltip-hint__checks::-webkit-scrollbar-track {
    background-color: transparent;
}
.tooltip-hint__checks-item {
    padding-right: var(--offset-extrasmall);
}
.tooltip-hint__checks-divider {
    width: calc(100% - 0.625rem);
    height: 0.0625rem;
    min-height: 0.0625rem;
    background-color: var(--color-border);
    display: none;
}

.tooltip-hint__checks._active .tooltip-hint__checks-divider {
    display: block;
}
.tooltip-hint__checks-item._active {
    order: -1;
}

/* tooltip active */
.tooltip-hint._active {
    transform: translateY(var(--offset-extrasmall));
    opacity: 1;
    pointer-events: all;
}
.tooltip-hint.tooltip-hint_top._active {
    transform: translateY(calc(var(--offset-extrasmall) * -1));
}

@media screen and (min-width: 1024px) {
    .tooltip-hint__link:hover {
        color: var(--color-primary);
        background-color: var(--color-light-grey-3);
    }
}
.tooltip-hint__link:active {
    color: var(--color-primary);
}

/* tooltip-form */
.tooltip-form {
    padding: 0.25rem var(--offset-tooltip);
}
.tooltip-form .range-inputs__inputs .field {
    max-width: 6.5rem;
}
.tooltip-form__bottom {
    display: flex;
    align-items: center;
    gap: var(--offset-extrasmall);
}

/* tooltip card */
.tooltip-card {
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.2s opacity, 0.2s transform, 0.2s background-color;
    pointer-events: none;
    opacity: 0;
    z-index: 995;
}
/* tooltip card active */
.tooltip-card._active {
    transform: translateY(var(--offset-extrasmall));
    opacity: 1;
    pointer-events: all;
}
.tooltip-card.tooltip-hint_top._active {
    transform: translateY(calc(var(--offset-extrasmall) * -1));
}

@media screen and (max-width: 424px) {
    .tooltip-card {
        width: calc(100% - var(--grid-gap) * 2);
    }
}

/**/
.tooltip-list {
    border-radius: var(--radius-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--color-extralight);
    padding: var(--offset-extrasmall) 0;

    overflow-y: auto;
    max-height: 15rem;
    scrollbar-width: none;
    box-shadow: var(--shadow-dropdown);
}
.tooltip-list::-webkit-scrollbar,
.tooltip-list::-webkit-scrollbar-track,
.tooltip-list::-webkit-scrollbar-thumb {
    display: none;
}
.tooltip-list__label {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 var(--offset-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}
.tooltip-list__label input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}
.tooltip-list__item-caption {
    display: flex;
    padding: var(--offset-extrasmall) 0;
    border-bottom: 0.0625rem solid var(--color-border);
    transition: var(--transition);
}
.tooltip-list__label input:checked + .tooltip-list__item-caption {
    color: var(--color-text-muted);
}


/**/
.tooltip-window {
    max-width: var(--width-tooltip, 24.6875rem);
    padding: var(--offset-secondary);
    border: 0.0625rem solid;
    border-image: linear-gradient(44.97deg, rgba(255, 255, 255, 0.4) 1.18%, rgba(255, 255, 255, 0.05) 100.34%) 1;
    backdrop-filter: blur(2.5rem);
    -webkit-backdrop-filter: blur(2.5rem);
    background-color: var(--color-black-40);
    color: var(--color-extralight);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-regular);
}

@media screen and (max-width: 1023.5px) {
    .tooltip-window {
        max-width: var(--width-tooltip, 18.75rem);
        padding: var(--offset-extrasmall) var(--offset-small);
        font-size: 0.875rem;
        line-height: 1.4;
    }
}