@use '../../../../mx-core/src/base/colors';
@use '../../../../mx-core/src/base/typography';
@use '../../../../mx-core/src/base/shape';

.mx-rich-tooltip {
  @extend .rounded-x-sm;
  padding: 12px 16px;
  overflow: hidden;
  max-width: 384px;

  &__title {
    @extend .gl-title-sm;
    margin-bottom: 4px;
  }

  &__content {
    @extend .gl-body-md;
    margin-bottom: 4px;
  }

  &__footer {
    margin-top: 8px;
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
    gap: 8px;
  }
}