//
// Labels
// --------------------------------------------------
@use "sass:math";

.label {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  font-size: $label-font-size;
  line-height: $label-line-height;
  display: inline-block;
  border-radius: $border-radius-base * 2;
  padding: $label-padding-y $label-padding-x;
  font-weight: $font-weight-regular;

  @include themes(color, color-new-body-dark);

  @include label-default(label-default-bg);

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Elements
  // --------------------------------

  &-close {
    color: $color-white-rgba-48;
    cursor: pointer;

    &:before {
      content: "\f057";
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;
      vertical-align: bottom;
    }

    .fa,
    .far {
      vertical-align: -10%;
    }

    &[href] {
      &:hover,
      &:focus {
        color: $color-white-rgba-48;
      }
    }
  }

  &-icon {
    cursor: pointer;
    margin-right: $grid-unit-y - 2;

    .fa,
    .far {
      vertical-align: -10%;
    }

    &-pos-right {
      margin-right: 0;
      margin-left: $grid-unit-y - 2;
    }
  }

  // Color Variations
  // --------------------------------

  //# Brand

  &-primary {
    @include label-primary();
  }

  &-success {
    @include label-success();
  }

  &-info {
    @include label-info();
  }

  &-warning {
    @include label-warning();
  }

  &-danger {
    @include label-danger();
  }

  //# Harmony

  @each $group-name, $group in $map-harmony-colors-grouped {
    @each $name, $color in map-get($group, colors) {
      &-#{$name} {
        @include label-variant($color, $group-name);
      }
    }
  }

  &-bordered {
    @include themes-border(color-new-border);
    @include themes(background, color-new-surface);
  }

  &-tag {
    padding-left: $padding-small-horizontal;
    padding-right: $padding-xs-horizontal;
    border-radius: ceil($grid-unit-y * 1.5);

    .label-close {
      vertical-align: 0%;
    }
  }

  &-user {
    $label-size: $grid-unit-y * 3;
    $padding-v: 1px;
    $padding-h: $padding-base-horizontal - 1;
    $padding-between: $grid-unit-x;
    $avatar-size: $label-size - $padding-v * 2 - 2;

    color: $color-text-dark;
    padding: $padding-v $padding-h;
    position: relative;
    border-radius: ceil($label-size * 0.5);
    border: 1px solid $color-grey-rgba-16;
    line-height: $avatar-size;
    font-weight: $font-weight-medium;

    @include themes-border(label-user-border-color);
    @include themes(background-color, label-user-bg);
    @include themes(color, color-text-dark);

    &[href] {
      &:hover,
      &:focus {
        @include themes(background-color, label-user-bg-hover);
        @include themes(border-color, label-user-hover-border-color);
      }
    }

    .label-close {
      margin-right: -$grid-unit-x;
      padding-left: $padding-between - 5;

      &,
      &[href] {
        @include themes(color, label-user-close-color);
      }

      &[href] {
        &:hover,
        &:focus {
          @include themes(color, label-user-close-color-hover);
        }
      }
    }

    .avatar,
    .flag-icon {
      position: absolute;
      left: $padding-v;
      top: $padding-v;
      border-radius: $avatar-size * 0.5;
      font-size: $avatar-size;

      & + .label-user-title {
        padding-left: $avatar-size + $padding-between -
          ($padding-h - $padding-v);
      }
    }

    .avatar {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      font-size: $font-size-small;

      @include avatar-size($avatar-size);
    }

    &.label-lg {
      $label-size: $grid-unit-y * 4;
      $avatar-size: $grid-unit-y * 3;
      $padding-v: $padding-xs-vertical;
      $padding-h: $padding-base-horizontal - 1;
      $padding-between: ceil($grid-unit-x * 1.5);

      padding: ($padding-v - 1) $padding-h;
      border-radius: $label-size * 0.5;
      line-height: $avatar-size;

      .label-close {
        padding-left: $padding-between - 5;
      }

      .avatar {
        border-radius: $avatar-size * 0.5;
        left: $padding-v;
        top: math.div($padding-v, 2) + 1;
        font-size: $font-size-small;

        @include avatar-size($avatar-size);

        & + .label-user-title {
          padding-left: $avatar-size + $padding-between -
            ($padding-h - $padding-v);
        }
      }
    }

    &.label-xl {
      $label-size: $grid-unit-y * 5;
      $avatar-size: $grid-unit-y * 4;
      $padding-v: $padding-xs-vertical - 1;
      $padding-h: $padding-large-horizontal - 1;
      $padding-between: $grid-unit-x * 2;

      padding: $padding-v $padding-h;
      border-radius: $label-size * 0.5;
      line-height: $avatar-size;

      .label-close {
        margin-right: -$grid-unit-x * 2;
        padding-left: $padding-between - 5;
      }

      .avatar {
        $size: $grid-unit-y * 5;

        border-radius: $avatar-size * 0.5;
        left: $padding-v;
        top: $padding-v;
        font-size: $font-size-h4;

        @include avatar-size($avatar-size);

        & + .label-user-title {
          padding-left: $avatar-size + $padding-between -
            ($padding-h - $padding-v);
        }
      }
    }
  }

  &-org {
    font-weight: $font-weight-bold;
    font-size: $font-size-h4;
    line-height: $grid-unit-y * 4;
    padding: $grid-unit-y $grid-unit-y * 2 $grid-unit-y;

    @include themes(color, color-text-dark);
    @include themes(background-color, label-org-bg);
    @include themes-border(label-org-border);

    img {
      height: $grid-unit-y * 4;
      width: auto;
      margin-right: $grid-unit-y * 2;
      margin-left: -$grid-unit-y;
    }

    &-stacked {
      display: flex;

      .label-wrapper {
        width: $grid-unit-y;
      }
    }
  }

  &-rounded {
    border-radius: ceil(($label-line-height + $label-padding-y * 2) * 0.5);
  }

  &-squared {
    width: $label-line-height + $label-padding-y * 2;
    padding-left: 0;
    padding-right: 0;

    &.label-lg {
      width: $label-line-height-lg + $label-padding-y-lg * 2;
      padding-left: 0;
      padding-right: 0;
    }

    &.label-xl {
      width: $label-line-height-xl + $label-padding-y-xl * 2;
      padding-left: 0;
      padding-right: 0;
    }
  }

  &-block {
    display: block;
    width: 100%;

    @include text-overflow();
  }

  // Size variations
  // --------------------------------

  &-lg {
    @include label-lg();
  }

  &-xl {
    @include label-xl();
  }

  // Label Toolbar
  // --------------------------------

  &-toolbar {
    margin-bottom: -$grid-unit-y;
    margin-right: -$grid-unit-y;

    .label {
      display: inline-block;
      margin-bottom: $grid-unit-y;
      margin-right: $grid-unit-y;
    }
  }
}