@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-stone-800;
  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 subscribed user is logged in
.u-user-role--subscribed {
  .c-indicator-icon__art--key {
    fill: $color-stone-800;
  }
}
// Globe Advisor styling
// subscribed
.u-user-entitlement--advisor {
  .c-indicator-icon__art--ga {
    fill: $color-blue-100;
  }
  .c-indicator-icon__art--ga--inverted {
    fill: $color-blue-200;
    opacity: .6;
  }
}
// anonymous
.c-indicator-icon__art--ga {
  width: rem(21);
  height: rem(12);
  fill: $color-blue-300;
  &--inverted {
    width: rem(21);
    height: rem(12);
    fill: $color-blue-200;
  }
}
