@import "settings.colors";

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

// TODO: Should we rename things as follows, since the text
// isn't actually a child of the icon, but rather a sibling?
//
// .c-indicator
// .c-indicator__icon
// .c-indicator__icon-art
// .c-indicator__text

.c-indicator-icon {
  margin-left: rem(4);
  display: inline-block;
  vertical-align: middle;
}
.c-indicator-icon__art {
  width: rem(18);
  height: rem(18);
  fill: $color-grey-300;
  display: block;
}
.c-indicator-icon__text {
  @include font-gm-sans;
  font-size: rem(11);
  color: $color-grey-660;
  margin-left: rem(4);
}
// Different size for key icon
.c-indicator-icon__art--key {
  width: rem(21);
  height: rem(12);
}
// Key icon changes colour when unlimited user is logged in
.u-user-role--unlimited {
  .c-indicator-icon__art--key {
    fill: $color-stone-300;
  }
}

// Cannabis Pro styling
// Hide keys for CP users
.u-user-entitlement--cannabis-pro {
  .c-indicator-icon__art--canpro,
  .c-indicator-icon__art--canpro--inverted {
    display: none;
  }
}

.c-indicator-icon__art--canpro {
  width: rem(21);
  height: rem(12);
  fill: $color-canpro-500;
  &--inverted {
    width: rem(21);
    height: rem(12);
    fill: $color-canpro-100;
  }
}
