//
// Labels
// --------------------------------------------------

@mixin label-default($color-variable) {
  @each $theme, $map in $themes {
    .#{$theme} & {
      $color: map-get($map, $color-variable);
      $color-text-dark: map-get($map, color-text-dark);
      $label-close-color: map-get($map, label-close-color);
      $label-close-color-hover: map-get($map, label-close-color-hover);
      $label-unselected-border-color: map-get(
        $map,
        label-unselected-border-color
      );
      $label-unselected-bg: map-get($map, label-unselected-bg);
      $label-unselected-hover-bg: map-get($map, label-unselected-hover-bg);
      $label-unselected-hover-border-color: map-get(
        $map,
        label-unselected-hover-border-color
      );
      $label-unselected-close-color: map-get(
        $map,
        label-unselected-close-color
      );

      background-color: $color;

      .label-close {
        &,
        &[href] {
          color: $label-close-color;
        }

        &[href] {
          &:hover,
          &:focus {
            color: $label-close-color-hover;
          }
        }
      }

      .label-icon {
        color: inherit;

        &:hover,
        &:focus {
          color: $color;
        }
      }

      &[href],
      &.pointer-cursor {
        color: $color-text-dark;

        &:hover,
        &:focus {
          background-color: rgba($color, 0.2);
          color: $color-text-dark;
        }

        &.active {
          background-color: rgba($color, 0.2);
          color: $color-text-dark;

          &:hover,
          &:focus {
            background-color: rgba($color, 0.3);
            color: $color-text-dark;
          }
        }
      }

      &.label-unselected {
        border: 1px solid $label-unselected-border-color;
        background-color: $label-unselected-bg;

        &[href] {
          &:hover,
          &:focus {
            background-color: $label-unselected-hover-bg;
            border-color: $label-unselected-hover-border-color;
          }
        }

        .label-close {
          &,
          &[href] {
            color: $label-unselected-close-color;
          }

          &[href] {
            &:hover,
            &:focus {
              color: $color-text-dark;
            }
          }
        }
      }
    }
  }
}

@mixin label-variant($color, $group-name: "default") {
  @each $theme, $map in $themes {
    .#{$theme} & {
      $label-close-color: map-get($map, label-close-color);
      $label-close-color-hover: map-get($map, label-close-color-hover);
      $label-unselected-border-color: map-get(
        $map,
        label-unselected-border-color
      );
      $label-unselected-bg: map-get($map, label-unselected-bg);
      $label-unselected-hover-bg: map-get($map, label-unselected-hover-bg);
      $label-unselected-hover-border-color: map-get(
        $map,
        label-unselected-hover-border-color
      );
      $label-unselected-close-color: map-get(
        $map,
        label-unselected-close-color
      );
      $background-color: rgba($color, 0.08);
      $background-color-hover: rgba($color, 0.2);
      $background-color-active-hover: rgba($color, 0.3);
      $disabled-color: rgba($color, 0.5);
      $disabled-bg: rgba($color, 0.04);

      @if $group-name == "light" {
        $color: darken($color, 20%);
        $background-color: rgba($color, 0.05);
        $background-color-hover: rgba($color, 0.2);
        $background-color-active-hover: rgba($color, 0.3);
        $disabled-color: rgba($color, 1);
        $disabled-bg: rgba($color, 0.1);
      }

      color: $color;
      background-color: $background-color;

      &.label-disabled {
        color: $disabled-color;
        background-color: $disabled-bg;
      }

      .label-close {
        &,
        &[href] {
          color: $color;
        }

        &[href] {
          &:hover,
          &:focus {
            color: darken($color, 10%);
          }
        }
      }

      .label-icon {
        color: $color;

        &[href] {
          &:hover,
          &:focus {
            color: darken($color, 10%);
          }
        }
      }

      &[href] {
        color: $color;

        &:hover,
        &:focus {
          background-color: $background-color-hover;
          color: $color;
        }

        &.active {
          background-color: $background-color-hover;
          color: $color;

          &:hover,
          &:focus {
            background-color: $background-color-active-hover;
            color: $color;
          }
        }

        &.label-disabled {
          &,
          &:hover,
          &:focus {
            cursor: not-allowed;
            background-color: $disabled-bg;
          }
        }
      }

      &.label-unselected {
        border: 1px solid $label-unselected-border-color;
        background-color: $label-unselected-bg;

        &[href] {
          &:hover,
          &:focus {
            background-color: $label-unselected-hover-bg;
            border-color: $label-unselected-hover-border-color;
          }
        }

        .label-close {
          &,
          &[href] {
            color: $label-unselected-close-color;
          }

          &[href] {
            &:hover,
            &:focus {
              color: $color;
            }
          }
        }
      }
    }
  }
}

@mixin label-primary() {
  @include label-variant($label-primary-bg);
}

@mixin label-success() {
  @include label-variant($label-success-bg);
}

@mixin label-info() {
  @include label-variant($label-info-bg);
}

@mixin label-warning() {
  @include label-variant($label-warning-bg);
}

@mixin label-danger() {
  @include label-variant($label-danger-bg);
}

@mixin label-lg() {
  font-size: $label-font-size-lg;
  line-height: $label-line-height-lg;
  padding: $label-padding-y-lg $label-padding-x-lg;

  .label-icon {
    margin-right: $label-padding-x-lg - 6;

    &-pos-right {
      margin-right: 0;
      margin-left: $label-padding-x-lg - 6;
    }
  }

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

@mixin label-xl() {
  font-size: $label-font-size-xl;
  line-height: $label-line-height-xl;
  padding: $label-padding-y-xl $label-padding-x-xl;

  .label-icon {
    margin-right: $label-padding-x-xl - 6;

    &-pos-right {
      margin-right: 0;
      margin-left: $label-padding-x-xl - 6;
    }
  }

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

  &.label-outline {
    padding: ($label-padding-y-xl - 1) ($label-padding-x-xl - 1);
  }
}