@use '../../variables' as *;

$b: '.tooltip';

#{$b} {
    left: 0;
    max-width: calc(100vw - 32px);
    position: absolute;
    top: 0;
    width: max-content;
    z-index: 200;

    @media (--tablet-portrait-up) {
        max-width: 300px;
    }

    &__arrow {
        #{$b}_theme_light &,
        #{$b}_theme_small-light &,
        #{$b}_theme_actions & {
            background-color: $tooltip-light-bg;

            @include dark-border;
        }

        #{$b}_theme_light#{$b}_side_top &,
        #{$b}_theme_small-light#{$b}_side_top &,
        #{$b}_theme_actions#{$b}_side_top & {
            @include dark-border-disable((top, left));
        }

        #{$b}_theme_light#{$b}_side_bottom &,
        #{$b}_theme_small-light#{$b}_side_bottom &,
        #{$b}_theme_actions#{$b}_side_bottom & {
            @include dark-border-disable((right, bottom));
        }

        #{$b}_theme_light#{$b}_side_left &,
        #{$b}_theme_small-light#{$b}_side_left &,
        #{$b}_theme_actions#{$b}_side_left & {
            @include dark-border-disable((bottom, left));
        }

        #{$b}_theme_light#{$b}_side_right &,
        #{$b}_theme_small-light#{$b}_side_right &,
        #{$b}_theme_actions#{$b}_side_right & {
            @include dark-border-disable((top, right));
        }

        #{$b}_theme_dark &,
        #{$b}_theme_small-dark & {
            background-color: $tooltip-dark-bg;
        }

        #{$b}_theme_light &,
        #{$b}_theme_dark &,
        #{$b}_theme_actions & {
            height: 10px;
            width: 10px;
        }

        #{$b}_theme_small-light &,
        #{$b}_theme_small-dark & {
            height: 8px;
            width: 8px;
        }
    }

    &__container {
        #{$b}_theme_light &,
        #{$b}_theme_small-light &,
        #{$b}_theme_actions & {
            background-color: $tooltip-light-bg;
            border-radius: $tooltip-radius;
            box-shadow: $tooltip-shadow;
            color: $tooltip-light-color;

            @include dark-border;
        }

        #{$b}_theme_dark &,
        #{$b}_theme_small-dark & {
            background-color: $tooltip-dark-bg;
            border-radius: $tooltip-radius;
            color: $tooltip-dark-color;
        }

        #{$b}_theme_light &,
        #{$b}_theme_dark & {
            padding: 16px 24px;

            @include font($tooltip-font);
        }

        #{$b}_theme_small-light &,
        #{$b}_theme_small-dark & {
            padding: 12px 16px;

            @include font($tooltip-small-font);
        }

        #{$b}_theme_actions & {
            @include font($tooltip-font);
        }
    }

    &__title {
        margin-bottom: 4px * 2;

        @include font($tooltip-title-font);
    }

    &__image {
        max-height: $tooltip-image-max-height;
        object-fit: contain;
        width: 100%;
    }
}