@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-interactive-label {
  @include font-gm-sans-bold;
  margin: 0;
  padding: rem(6) rem(13) rem(6) rem(6);
  font-size: rem(11);
  line-height: line-height(11, 15); // font-size and line-height, in pixels
  white-space: nowrap;
  color: $color-white;
  background-color: $color-grey-900;
  border-radius: 4px;
  display: flex;
  align-items: center;
  &::before {
    content: "";
    width: rem(30);
    height: rem(30);
    background-color: $color-grey-900;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
  &--gallery::before {
    background-image: url("~assets/patterns/images/gallery-button.svg");
  }
  &--video::before {
    background-image: url("~assets/patterns/images/play-button.svg");
  }
}

.c-interactive-label__text {
  padding-left: rem(8);
}
