
// @require core/widget/widget.scss
// @require decorators/target/target.scss
// @optional widgets/icon/icon.scss
// @optional widgets/icons/icons.scss

//TODO: Add a way to force labels icons to have the same height as labels with just text
//TODO: Add support for img inside it (It should probably behave like Angular Material's chip)

/* LABEL */

.label {

  @extend %widget;
  @extend %targetable;
  @include children-no-gutter ();
  @include color ( $label-color, $label-color-force, $label-color-basic );
  @include text-no-wrap ();
  font-weight: $label-font-weight;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1 * $icon-scale-factor;
  border-radius: $label-border-radius;
  padding: $label-padding-y $label-padding-x;
  min-width: $line-height-em + ( $label-padding-x * 2 ); // In order to always maintain a reasonable aspect ratio

  /* HORIZONTAL GUTTER */

  > :not(.overlay):not(.ripple-circle):not(input):not(select) {

    /* HORIZONTAL GUTTER */

    + * {
      margin-left: $label-inner-gutter;
    }

    + %icon {
      margin-left: $label-inner-gutter / $icon-scale-factor;
    }

  }

  /* ALIGNMENT */

  > %icon,
  > %icons,
  > :not(.overlay):not(.ripple-circle):first-child:not(:last-child),
  > :not(.overlay):not(.ripple-circle):first-child:not(:last-child) ~ *,
  > .overlay + :not(:last-child),
  > .ripple-circle + :not(:last-child) {
    vertical-align: middle;
  }

}
