@import 'commons';
$m-tooltip--width: 320px !default;
$m-tooltip--width--l: 540px !default;
$m-tooltip--max-height: 280px !default;

:root {
    --m-tooltip--max-height: #{$m-tooltip--max-height};
}

.m-tooltip {
    > :first-child {
        display: inline;
    }

    &.m--is-mode-definition {
        .m-tooltip__link /deep/ .m-link__text> :first-child {
            border-bottom: 1px dotted currentColor;
        }
    }

    &.m--is-disabled {
        .m-tooltip__icon {
            &.m-icon-button.m-icon-button {
                @include m-button--disabled();
            }
        }
    }

    &__icon {
        transition: color $m-transition-duration ease;
        color: $m-color-interactive-light;
        cursor: pointer;

        &:hover,
        &:focus {
            color: $m-color-interactive;
        }

        &:active {
            outline: none;
        }

        &.m-icon-button.m-icon-button {
            min-width: auto;
            min-height: auto;
            width: #{$m-font-size * 1px};
            height: #{$m-font-size * 1px};
            color: $m-color-interactive-light;

            &:hover,
            &:focus {
                color: $m-color-interactive;
            }
        }
    }

    &__close-button.m-tooltip__close-button {
        position: absolute;
        top: 1px;
        right: 1px;
    }

    &__body {
        padding: $m-space $m-space-xl $m-space $m-space;
        background: $m-color-information;
        word-break: break-word;
        user-select: text;

        @media (min-width: $m-mq-min-sm) {
            max-height: var(--m-tooltip--max-height);
            width: $m-tooltip--width;
            overflow-x: hidden;
            overflow-y: auto;
            border-radius: $m-border-radius-sm;
        }

        @media (max-height: $m-tooltip--max-height) {
            --m-tooltip--max-height: calc(100vh - #{ $m-space-md });

            min-height: $m-touch-size;
        }

        @include m-scrollbar();
    }
}

.m-tooltip__body-container {
    &.m--has-close-button {
        position: relative;

        .m-tooltip__body {
            padding-right: $m-space-lg;
        }
    }

    &.m--is-size-large {
        .m-tooltip__body {
            @media (min-width: $m-mq-min-sm) {
                width: $m-tooltip--width--l;
            }
        }
    }

    &:not(.m--is-mode-icon) {
        .m-tooltip__body {
            background: $m-color-white;

            @media (min-width: $m-mq-min-sm) {
                border: 1px solid $m-color-grey-light;
            }
        }
    }

    &.m--is-mode-icon {
        .m-tooltip__body {
            @media (max-width: $m-mq-max-sm) {
                position: relative;

                &::after {
                    position: fixed;
                    top: 0;
                    right: 0;
                    left: 0;
                    content: '';
                    height: 1px;
                    background: $m-color-interactive;
                }
            }

            @media (min-width: $m-mq-min-sm) {
                border: 1px solid $m-color-interactive;
            }
        }

        .m-tooltip__close-button {
            color: $m-color-interactive;

            &:hover,
            &:focus {
                color: $m-color-interactive-darker;
            }
        }
    }
}