@use '../../styles/abstracts' as *;
@use '../abstracts-theme/variables.theme' as *;

/* Theme molecule - tooltip */

.m-tooltip {
  $this: &;
  &__text {
    @include typography-level(themed($theme-map, 'typography', 'body'));
  }
  &__description {
    @include typography-level(themed($theme-map, 'typography', 'label'));
  }

  &--popup,
  &--example {
    background-color: themed($theme-map, 'color', 'grey', 100);
  }

  &__item{
    width: 100%;

    &:not(:last-child) {
      &:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        margin-top: toRem(7);
        margin-bottom: toRem(6);
        background-color: themed($theme-map, 'color', 'grey', 400);
      }
    }

    &__content {
      gap: toRem(10);

      &.-attribute {
        span {
          margin: auto 0;
        }
      }

      .a-h3.-attribute {
        font-size: toRem(18);
        line-height: toRem(24);

        img {
          max-width: toRem(28);
          height: auto;
        }
      }

      > p {
        font-size: toRem(14);
        line-height: toRem(16);
        > span {
          color: themed($theme-map, 'color', 'primary', 500);
        }
      }
    }
  }
}