.ez-tooltip {
    z-index: 1500;

    &.show {
        opacity: 1;
    }

    &.bs-tooltip-top &__arrow {
        height: calculateRem(8px);

        &::before {
            border-top-color: $ibexa-white;
        }
    }

    &.bs-tooltip-right &__arrow {
        width: calculateRem(8px);

        &::before {
            border-right-color: $ibexa-white;
        }
    }

    &.bs-tooltip-bottom &__arrow {
        height: calculateRem(8px);

        &::before {
            border-bottom-color: $ibexa-white;
        }
    }

    &.bs-tooltip-left &__arrow {
        width: calculateRem(8px);

        &::before {
            border-left-color: $ibexa-white;
        }
    }

    &__inner {
        padding: calulateRem(4px) calcuateRem(10px);
        max-width: calculateRem(250px);
        border: calculateRem(1px) solid $ibexa-color-base-light;
        border-radius: calculateRem(4px);
        background-color: $ibexa-white;
        color: $ibexa-color-font;
        font-size: calculateRem(11px);
        font-weight: 700;
        text-align: left;
        line-height: calculateRem(14px);
        box-shadow: 0 calculateRem(4px) calculateRem(6px) rgba(135, 135, 135, 0.35);
    }

    &--medium &__inner {
        padding: calculateRem(8px) calculateRem(16px);
        font-size: calculateRem(14px);
        line-height: calculateRem(15px);
    }

    &--ground-dark {
        .ez-tooltip {
            &__inner {
                color: $ibexa-white;
                background-color: $ibexa-color-ground-dark;
            }
        }

        &.ez-tooltip {
            &.bs-tooltip-top .ez-tooltip__arrow {
                &::before {
                    border-top-color: $ibexa-color-ground-dark;
                }
            }

            &.bs-tooltip-right .ez-tooltip__arrow {
                &::before {
                    border-right-color: $ibexa-color-ground-dark;
                }
            }

            &.bs-tooltip-bottom .ez-tooltip__arrow {
                &::before {
                    border-bottom-color: $ibexa-color-ground-dark;
                }
            }

            &.bs-tooltip-left .ez-tooltip__arrow {
                &::before {
                    border-left-color: $ibexa-color-ground-dark;
                }
            }
        }
    }
}
