// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

// TODO: Split badges and labels into separate files.

@mixin generateLabelStyles($color: gray, $alias: 1) {
  &.label-#{'' + $color},
  &.label-#{$alias} {
    border: $clr-label-borderwidth solid getLabelColor($color, bg-color);
  }

  &.clickable.label-#{'' + $color} {
    &:hover,
    &:active {
      text-decoration: none;
      background: $clr-label-bg-hover-color;
    }

    &:active {
      box-shadow: 0 $clr-label-borderwidth 0 0 getLabelColor($color, bg-color) inset;
      transform: translateY(0.5px);
    }
  }

  &.label-#{'' + $color} > .badge {
    background: getBadgeColor($color, bg-color);
    color: getBadgeColor($color, color);
  }
}

@mixin generateBadgeStyles($color: gray, $alias: 1) {
  &.badge-#{'' + $color},
  &.badge-#{$alias} {
    background: getBadgeColor($color, bg-color);
    color: getBadgeColor($color, color);
  }
}

@mixin generateStatusLabelStyles($status: info) {
  &.label-#{$status} {
    background: getLabelColor($status, bg-color);
    color: getLabelColor($status, color);
    border: $clr-label-borderwidth solid getLabelColor($status, border-color);
  }
}

@mixin generateStatusBadgeStyles($status: info) {
  &.badge-#{$status} {
    background: getBadgeColor($status, bg-color);
    color: getBadgeColor($status, color);
  }
}

@include exports('labels.clarity') {
  //NOTE: Had to use inline-flex, reset line-height to normal, and had to use change a few values
  //instead of using our baselineRem function. This was done to achieve the desired look
  //and to align this with our vertical baseline. Not sure why but aligning inline-blocks within inline-blocks
  //is a bit tricky. I initially used display: inline-block but I wasn't able to align the labels properly.
  .label,
  a.label {
    //default
    $label-nudge-for-vertical-alignment: 1px;
    font-size: $clr-label-font-size;
    font-weight: $clr-label-font-weight;
    letter-spacing: $clr-label-letter-spacing;

    // line-height needed to be adjusted to force center alignment
    line-height: 0.458333rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 $clr-label-padding-left-right $label-nudge-for-vertical-alignment;
    border-radius: 0.5rem;
    border: $clr-label-borderwidth solid $clr-label-default-border-color;
    height: 0.875rem;
    margin: 0 0.25rem 0 0;
    white-space: nowrap;
    color: $clr-label-font-color;

    &:visited {
      color: $clr-label-font-color;
    }

    &:focus,
    &:hover,
    &:active {
      text-decoration: none;
    }

    &.clickable {
      &:hover,
      &:active {
        background: $clr-label-bg-hover-color;
      }

      &:active {
        box-shadow: 0 1px 0 0 getLabelColor(gray, bg-color) inset;
        transform: translateY(0.5px);
      }
    }

    @include generateLabelStyles(gray, 1);
    @include generateLabelStyles(purple, 2);
    @include generateLabelStyles(blue, 3);
    @include generateLabelStyles(orange, 4);
    @include generateLabelStyles(light-blue, 5);

    @include generateStatusLabelStyles(info);
    @include generateStatusLabelStyles(success);
    @include generateStatusLabelStyles(warning);
    @include generateStatusLabelStyles(danger);

    & > .badge {
      margin: 0 -0.375rem 0 0.25rem; //-0.375 is -9px. 12px initial label padding plus a negative margin of 9
    }
  }

  //NOTE: Had to use inline-flex, reset line-height to normal, and had to use change a few values
  //instead of using our baselineRem function. This was done to achieve the desired look
  //and to align this with our vertical baseline. Not sure why but aligning inline-blocks within inline-blocks
  //is a bit tricky. I initially used display: inline-block but I wasn't able to align the badges properly.
  //TODO: I still am unable to align the badges center of the baseline but have managed to aligned it to the
  //bottom. There are no margins which are influencing this. Need to figure out whats the issue.
  .badge {
    $equiDimensions: 0.625rem;
    $rem_10px: 0.416667rem;

    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    min-width: $equiDimensions;
    background: getLabelColor(gray, bg-color);
    height: $equiDimensions;
    line-height: normal;
    border-radius: $rem_10px;
    font-size: $rem_10px;
    padding: 0 0.166667rem;
    margin-right: 0.25rem;
    white-space: nowrap;
    text-align: center;
    // TODO: use contrast color generators instead of hard-coded color vars
    color: $clr-badge-font-color;

    // TODO: use contrast color generators instead of hard-coded color vars
    &:visited {
      color: $clr-badge-font-color;
    }

    @include generateBadgeStyles(gray, 1);
    @include generateBadgeStyles(purple, 2);
    @include generateBadgeStyles(blue, 3);
    @include generateBadgeStyles(orange, 4);
    @include generateBadgeStyles(light-blue, 5);

    @include generateStatusBadgeStyles(info);
    @include generateStatusBadgeStyles(success);
    @include generateStatusBadgeStyles(danger);
    @include generateStatusBadgeStyles(warning);
  }

  @include fixForFirefox() {
    .label,
    a.label {
      // properly aligns labels in firefox...
      vertical-align: bottom;
    }
  }

  @include fixForIE10AndUp {
    .badge {
      padding: 0.083333rem 0.125rem 0;
    }
  }

  @include fixForMsEdge {
    .badge {
      padding: 0.083333rem 0.125rem 0;
    }
  }
}