@import '../../themes/default/elements/label.variables';

@if $use-label {
  /*******************************
  //@-        Label
  *******************************/
  
  .ui.label {
    display: inline-block;
    line-height: 1;
    vertical-align: $label-vertical-align;
  
    margin: $label-vertical-margin $label-horizontal-margin;
  
    background-color: $label-background-color;
    background-image: $label-background-image;
    padding: $label-vertical-padding $label-horizontal-padding;
    color: $label-color;
  
    text-transform: $label-text-transform;
    font-weight: $label-font-weight;
  
    border: $label-border;
    border-radius: $label-border-radius;
    transition: $label-transition;
  }
  
  .ui.label:first-child {
    margin-left: 0;
  }
  .ui.label:last-child {
    margin-right: 0;
  }
  
  /* Link */
  a.ui.label {
    cursor: pointer;
  }
  
  /* Inside Link */
  .ui.label > a {
    cursor: pointer;
    color: inherit;
    opacity: $label-link-opacity;
    transition: $label-link-transition;
  }
  .ui.label > a:hover {
    opacity: 1;
  }
  
  /* Image */
  .ui.label > img {
    width: auto !important;
    vertical-align: middle;
    height: $label-image-height;
  }
  
  /* Icon */
  .ui.left.icon.label > .icon,
  .ui.label > .icon {
    width: auto;
    margin: 0 $label-icon-distance 0 0;
  }
  
  /* Detail */
  .ui.label > .detail {
    display: inline-block;
    vertical-align: top;
    font-weight: $label-detail-font-weight;
    margin-left: $label-detail-margin;
    opacity: $label-detail-opacity;
  }
  .ui.label > .detail .icon {
    margin: 0 $label-detail-icon-distance 0 0;
  }
  
  /* Removable label */
  .ui.label > .close.icon,
  .ui.label > .delete.icon {
    cursor: pointer;
    font-size: $label-delete-size;
    opacity: $label-delete-opacity;
    transition: $label-delete-transition;
  }
  .ui.label > .close.icon:hover,
  .ui.label > .delete.icon:hover {
    opacity: 1;
  }
  
  /* Backward compatible positioning */
  .ui.label.left.icon > .close.icon,
  .ui.label.left.icon > .delete.icon {
    margin: 0 $label-delete-margin 0 0;
  }
  .ui.label:not(.icon) > .close.icon,
  .ui.label:not(.icon) > .delete.icon {
    margin: 0 0 0 $label-delete-margin;
  }
  
  /* Label for only an icon */
  .ui.icon.label > .icon {
    margin: 0 auto;
  }
  
  /* Right Side Icon */
  .ui.right.icon.label > .icon {
    margin: 0 0 0 $label-icon-distance;
  }
  
  /*-------------------
         Group
  --------------------*/
  
  .ui.labels > .label {
    margin: 0 $label-group-horizontal-margin $label-group-vertical-margin 0;
  }
  
  
  /*-------------------
         Coupling
  --------------------*/
  
  .ui.header > .ui.label {
    margin-top: $label-line-height-offset;
  }
  
  
  /* Remove border radius on attached segment */
  .ui.attached.segment > .ui.top.left.attached.label,
  .ui.bottom.attached.segment > .ui.top.left.attached.label  {
    border-top-left-radius: 0;
  }
  .ui.attached.segment > .ui.top.right.attached.label,
  .ui.bottom.attached.segment > .ui.top.right.attached.label  {
    border-top-right-radius: 0;
  }
  .ui.top.attached.segment > .ui.bottom.left.attached.label  {
    border-bottom-left-radius: 0;
  }
  .ui.top.attached.segment > .ui.bottom.right.attached.label  {
    border-bottom-right-radius: 0;
  }
  
  /* Padding on next content after a label */
  .ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached),
  .ui.top.attached.label + :not(.attached) {
    margin-top: $label-attached-segment-padding !important;
  }
  .ui.bottom.attached.label ~ :last-child:not(.attached) {
    margin-top:0;
    margin-bottom: $label-attached-segment-padding !important;
  }
  
  
  /*******************************
               Types
  *******************************/
  @if($use-label-type-image) {
    .ui.image.label {
      width: auto !important;
      margin-top: 0;
      margin-bottom: 0;
      max-width: 9999px;
      vertical-align: baseline;
      text-transform: none;
  
      background: $label-image-background;
      padding: $label-image-padding;
      border-radius: $label-image-border-radius;
      box-shadow: $label-image-box-shadow;
    }
  
    .ui.image.label img {
      display: inline-block;
      vertical-align: top;
  
      height: $label-image-image-height;
      margin: $label-image-image-margin;
      border-radius: $label-image-image-border-radius;
    }
  
    .ui.image.label .detail {
      background: $label-image-detail-background;
      margin: $label-image-detail-margin;
      padding: $label-image-detail-padding;
      border-radius: 0 $label-image-border-radius $label-image-border-radius 0;
    }
  }
  
  @if($use-label-type-tag) {
    /*-------------------
            Tag
    --------------------*/
  
    .ui.tag.labels .label,
    .ui.tag.label {
      margin-left: 1em;
      position: relative;
      padding-left: $label-tag-horizontal-padding;
      padding-right: $label-tag-horizontal-padding;
  
      border-radius: 0 $label-border-radius $label-border-radius 0;
      transition: $label-tag-transition;
    }
    .ui.tag.labels .label:before,
    .ui.tag.label:before {
        position: absolute;
        transform: translateY(-50%) translateX(50%) rotate(-45deg);
  
        top: $label-tag-triangle-top-offset;
        right: $label-tag-triangle-right-offset;
        content: '';
  
        background-color: inherit;
        background-image: $label-tag-triangle-background-image;
  
        width: $label-tag-triangle-size;
        height: $label-tag-triangle-size;
        transition: $label-tag-transition;
    }
  
  
    .ui.tag.labels .label:after,
    .ui.tag.label:after {
      position: absolute;
      content: '';
      top: 50%;
      left: -($label-tag-circle-size / 2);
  
      margin-top: -($label-tag-circle-size / 2);
      background-color: $label-tag-circle-color;
      width: $label-tag-circle-size;
      height: $label-tag-circle-size;
  
      box-shadow: $label-tag-circle-box-shadow;
      border-radius: $circular-radius;
    }
  
    @if($use-label-variation-basic-tag) {
      .ui.basic.tag.labels .label:before,
      .ui.basic.tag.label:before {
        border-color: inherit;
        border-width: $label-basic-border-width 0 0 $label-basic-border-width;
        border-style: inherit;
        right: $label-basic-border-full-width-offset;
      }
      .ui.basic.tag.labels .label:after,
      .ui.basic.tag.label:after {
        box-shadow: $label-basic-tag-circle-box-shadow;
      }
    }
  }
  
  @if($use-label-type-corner) {
    /*-------------------
        Corner Label
    --------------------*/
  
    .ui.corner.label {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0;
      padding: 0;
      text-align: center;
  
      border-color: $label-background-color;
  
      width: $label-corner-triangle-size;
      height: $label-corner-triangle-size;
      z-index: $label-corner-triangle-z-index;
      transition: $label-corner-triangle-transition;
    }
  
    /* Icon Label */
    .ui.corner.label{
      background-color: transparent !important;
    }
    .ui.corner.label:after {
      position: absolute;
      content: "";
      right: 0;
      top: 0;
      z-index: -1;
  
      width: 0;
      height: 0;
      background-color: transparent;
  
      border-top: 0 solid transparent;
      border-right: $label-corner-triangle-size solid transparent;
      border-bottom: $label-corner-triangle-size solid transparent;
      border-left: 0 solid transparent;
  
      border-right-color: inherit;
      transition: $label-corner-triangle-transition;
    }
  
    .ui.corner.label .icon {
      cursor: inherit;
      position: absolute;
      top: $label-corner-icon-top-offset;
      left: auto;
      right: $label-corner-icon-right-offset;
      font-size: $label-corner-icon-size;
      margin: 0;
    }
  
    /* Left Corner */
    .ui.left.corner.label,
    .ui.left.corner.label:after {
      right: auto;
      left: 0;
    }
    .ui.left.corner.label:after {
      border-top: $label-corner-triangle-size solid transparent;
      border-right: $label-corner-triangle-size solid transparent;
      border-bottom: 0 solid transparent;
      border-left: 0 solid transparent;
  
      border-top-color: inherit;
    }
    .ui.left.corner.label .icon {
      left: $label-corner-icon-left-offset;
      right: auto;
    }
  
    /* Segment */
    .ui.segment > .ui.corner.label {
      top: -1px;
      right: -1px;
    }
    .ui.segment > .ui.left.corner.label {
      right: auto;
      left: -1px;
    }
  }
  
  @if($use-label-type-ribbon) {
    /*-------------------
          Ribbon
    --------------------*/
  
    .ui.ribbon.label {
      position: relative;
      margin: 0;
      min-width: max-content;
      border-radius: 0 $label-border-radius $label-border-radius 0;
      border-color: $label-ribbon-shadow-color;
    }
  
    .ui.ribbon.label:after {
      position: absolute;
      content: '';
  
      top: 100%;
      left: 0;
      background-color: transparent;
  
      border-style: solid;
      border-width: 0 $label-ribbon-triangle-size $label-ribbon-triangle-size 0;
      border-color: transparent;
      border-right-color: inherit;
  
      width: 0;
      height: 0;
    }
    /* Positioning */
    .ui.ribbon.label {
      left: $label-ribbon-offset;
      margin-right: -$label-ribbon-triangle-size;
      padding-left: $label-ribbon-distance;
      padding-right: $label-ribbon-triangle-size;
    }
    .ui[class*="right ribbon"].label {
      left: $label-right-ribbon-offset;
      padding-left: $label-ribbon-triangle-size;
      padding-right: $label-ribbon-distance;
    }
    .ui.basic.ribbon.label {
      padding-top: $label-basic-ribbon-offset;
      padding-bottom: $label-basic-ribbon-offset;
    }
    .ui.basic.ribbon.label:not([class*="right ribbon"]) {
      padding-left: $label-basic-ribbon-triangle-size-offset;
      padding-right: $label-basic-ribbon-triangle-size;
    }
    .ui.basic[class*="right ribbon"].label {
      padding-left: $label-basic-ribbon-triangle-size;
      padding-right: $label-basic-ribbon-triangle-size-offset;
    }
    .ui.basic.ribbon.label::after {
      top: $label-basic-border-full-width-offset;
    }
    .ui.basic.ribbon.label:not([class*="right ribbon"])::after {
      left: $label-basic-border-width-offset;
    }
    .ui.basic[class*="right ribbon"].label::after {
      right: $label-basic-border-width-offset;
    }
  
    /* Right Ribbon */
    .ui[class*="right ribbon"].label {
      text-align: left;
      transform: translateX(-100%);
      border-radius: $label-border-radius 0 0 $label-border-radius;
    }
    .ui[class*="right ribbon"].label:after {
      left: auto;
      right: 0;
  
      border-style: solid;
      border-width: $label-ribbon-triangle-size $label-ribbon-triangle-size 0 0;
      border-color: transparent;
      border-top-color: inherit;
    }
  
    /* Inside Table */
    .ui.image > .ribbon.label,
    .ui.card .image > .ribbon.label {
      position: absolute;
      top: $label-ribbon-image-top-distance;
    }
    .ui.card .image > .ui.ribbon.label,
    .ui.image > .ui.ribbon.label {
      left: $label-ribbon-image-offset;
    }
    .ui.card .image > .ui[class*="right ribbon"].label,
    .ui.image > .ui[class*="right ribbon"].label {
      left: $label-right-ribbon-image-offset;
      padding-left: $label-horizontal-padding;
    }
  
    /* Inside Table */
    .ui.table td > .ui.ribbon.label {
      left: $label-ribbon-table-offset;
    }
    .ui.table td > .ui[class*="right ribbon"].label {
      left: $label-right-ribbon-table-offset;
      padding-left: $label-horizontal-padding;
    }
  }
  
  
  @if($use-label-type-attached) {
    /*-------------------
          Attached
    --------------------*/
  
    .ui[class*="top attached"].label,
    .ui.attached.label {
      width: 100%;
      position: absolute;
      margin: 0;
      top: 0;
      left: 0;
  
      padding: $label-attached-vertical-padding $label-attached-horizontal-padding;
  
      border-radius: $label-attached-corner-border-radius $label-attached-corner-border-radius 0 0;
    }
    .ui[class*="bottom attached"].label {
      top: auto;
      bottom: 0;
      border-radius: 0 0 $label-attached-corner-border-radius $label-attached-corner-border-radius;
    }
  
    .ui[class*="top left attached"].label {
      width: auto;
      margin-top: 0 !important;
      border-radius: $label-attached-corner-border-radius 0 $label-attached-border-radius 0;
    }
  
    .ui[class*="top right attached"].label {
      width: auto;
      left: auto;
      right: 0;
      border-radius: 0 $label-attached-corner-border-radius 0 $label-attached-border-radius;
    }
    .ui[class*="bottom left attached"].label {
      width: auto;
      top: auto;
      bottom: 0;
      border-radius: 0 $label-attached-border-radius 0 $label-attached-corner-border-radius;
    }
    .ui[class*="bottom right attached"].label {
      top: auto;
      bottom: 0;
      left: auto;
      right: 0;
      width: auto;
      border-radius: $label-attached-border-radius 0 $label-attached-corner-border-radius 0;
    }
  }
  
  /*******************************
               States
  *******************************/
  
  /*-------------------
        Disabled
  --------------------*/
  
  .ui.label.disabled {
    opacity: 0.5;
  }
  
  /*-------------------
          Hover
  --------------------*/
  
  .ui.labels a.label:hover,
  a.ui.label:hover {
    background-color: $label-hover-background-color;
    border-color: $label-hover-background-color;
  
    background-image: $label-hover-background-image;
    color: $label-hover-text-color;
  }
  .ui.labels a.label:hover:before,
  a.ui.label:hover:before {
    color: $label-hover-text-color;
  }
  
  /*-------------------
          Active
  --------------------*/
  
  .ui.active.label {
    background-color: $label-active-background-color;
    border-color: $label-active-background-color;
  
    background-image: $label-active-background-image;
    color: $label-active-text-color;
  }
  .ui.active.label:before {
    background-color: $label-active-background-color;
    background-image: $label-active-background-image;
    color: $label-active-text-color;
  }
  
  /*-------------------
       Active Hover
  --------------------*/
  
  .ui.labels a.active.label:hover,
  a.ui.active.label:hover {
    background-color: $label-active-hover-background-color;
    border-color: $label-active-hover-background-color;
  
    background-image: $label-active-hover-background-image;
    color: $label-active-hover-text-color;
  }
  .ui.labels a.active.label:hover:before,
  a.ui.active.label:hover:before {
    background-color: $label-active-hover-background-color;
    background-image: $label-active-hover-background-image;
    color: $label-active-hover-text-color;
  }
  
  
  /*-------------------
        Visible
  --------------------*/
  
  .ui.labels.visible .label,
  .ui.label.visible:not(.dropdown) {
    display: inline-block !important;
  }
  
  /*-------------------
        Hidden
  --------------------*/
  
  .ui.labels.hidden .label,
  .ui.label.hidden {
    display: none !important;
  }
  
  
  /*******************************
             Variations
  *******************************/
  
  
  @if($use-label-variation-basic) {
    /*-------------------
            Basic
    --------------------*/
  
    .ui.basic.labels .label,
    .ui.basic.label {
      background: $label-basic-background;
      border: $label-basic-border;
      color: $label-basic-color;
      box-shadow: $label-basic-box-shadow;
    }
  
    /* Link */
    .ui.basic.labels a.label:hover,
    a.ui.basic.label:hover {
      text-decoration: none;
      background: $label-basic-hover-background;
      color: $label-basic-hover-color;
      box-shadow: $label-basic-hover-box-shadow;
    }
  }
  
  
  /*-------------------
         Fluid
  --------------------*/
  
  .ui.label.fluid,
  .ui.fluid.labels > .label {
    width: 100%;
    box-sizing: border-box;
  }
  
  @if($use-label-variation-inverted) {
    /*-------------------
          Inverted
    --------------------*/
  
    .ui.inverted.labels .label,
    .ui.inverted.label {
      color: $inverted-text-color;
      background-color: $label-inverted-background-color;
    }
    .ui.inverted.corner.label {
        border-color: $label-inverted-background-color;
    }
    .ui.inverted.corner.label:hover {
        border-color: $label-background-color;
        transition: none;
    }
    .ui.inverted.basic.labels .label,
    .ui.inverted.basic.label,
    .ui.inverted.basic.label:hover {
      border-color: $label-basic-inverted-border-color;
      background: $black;
    }
    .ui.inverted.basic.label:hover {
      color: $link-color;
    }
  }
  
  /*-------------------
         Colors
  --------------------*/
  
  @each $key, $value in $label-colors-map {
    @if(index(join($main-colors-names, $use-label-variation-colors), $key+'')) {
      $isDark: map-get($value, isDark);
      $_labelColor: map-get($value, color);
      $_labelInvertedColor: map-get($value, light);
      $_labelTextColor: map-get($value, text);
      $_labelHover: map-get($value, hover);
      $_labelInvertedHover: map-get($value, lightHover);
      $_labelHoverTextColor: map-get($value, hoverText);
      $_labelRibbonShadow: map-get($value, ribbon);
      $_labelInvertedRibbonShadow: map-get($value, invertedRibbon);
  
      .ui.#{$key + ""}.labels .label,
      .ui.ui.ui.#{$key + ""}.label {
        background-color: $_labelColor;
        border-color: $_labelColor;
        color: $_labelTextColor;
      }
      /* Link */
      .ui.#{$key + ""}.labels a.label:hover,
      a.ui.ui.ui.#{$key + ""}.label:hover{
        background-color: $_labelHover;
        border-color: $_labelHover;
        color: $_labelHoverTextColor;
      }
      /* Ribbon */
      .ui.ui.ui.#{$key + ""}.ribbon.label {
        border-color: $_labelRibbonShadow;
      }
      /* Basic */
      .ui.basic.labels .#{$key + ""}.label,
      .ui.ui.ui.basic.#{$key + ""}.label {
        background: $label-basic-background;
        border-color: $_labelColor;
        color: $_labelColor;
      }
      .ui.basic.labels a.#{$key + ""}.label:hover,
      a.ui.ui.ui.basic.#{$key + ""}.label:hover {
        background: $label-basic-background;
        border-color: $_labelHover;
        color: $_labelHover;
      }
      /* Inverted */
      .ui.inverted.labels .#{$key + ""}.label,
      .ui.ui.ui.inverted.#{$key + ""}.label {
        background-color: $_labelInvertedColor;
        border-color: $_labelInvertedColor;
        color: $black;
      }
      /* Inverted Link */
      .ui.inverted.labels a.#{$key + ""}.label:hover,
      a.ui.ui.ui.inverted.#{$key + ""}.label:hover{
        background-color: $_labelInvertedHover;
        border-color: $_labelInvertedHover;
        @if not ($isDark) {
          color: $black;
        }
        @if ($isDark) {
          color: $_labelTextColor;
        }
      }
      /* Inverted Ribbon */
      .ui.ui.ui.inverted.#{$key + ""}.ribbon.label {
        border-color: $_labelInvertedRibbonShadow;
      }
      /* Inverted Basic */
      .ui.inverted.basic.labels .#{$key + ""}.label,
      .ui.ui.ui.inverted.basic.#{$key + ""}.label {
        background-color: $label-inverted-background;
        border-color: $_labelInvertedColor;
        @if not ($isDark) {
          color: $_labelInvertedColor;
        }
        @if ($isDark) {
          color: $inverted-text-color;
        }
      }
      .ui.inverted.basic.labels a.#{$key + ""}.label:hover,
      a.ui.ui.ui.inverted.basic.#{$key + ""}.label:hover {
        border-color: $_labelInvertedHover;
        background-color: $label-inverted-background;
        @if not ($isDark) {
          color: $_labelInvertedHover;
        }
      }
      /* Inverted Basic Tags */
      .ui.inverted.basic.tag.labels .#{$key + ""}.label,
      .ui.ui.ui.inverted.#{$key + ""}.basic.tag.label {
        border: $label-inverted-border-size solid $_labelInvertedColor;
      }
      .ui.inverted.basic.tag.labels .#{$key + ""}.label:before,
      .ui.ui.ui.inverted.#{$key + ""}.basic.tag.label:before {
        border-color: inherit;
        border-width: $label-inverted-border-size 0 0 $label-inverted-border-size;
        border-style: inherit;
        background-color: $label-inverted-background;
        right: calc(100% + #{$label-inverted-border-size});
      }
    }
  }
  
  @if($use-label-type-horizontal){
    /*-------------------
        Horizontal
    --------------------*/
  
    .ui.horizontal.labels .label,
    .ui.horizontal.label {
      margin: 0 $label-in-horizontal-position-margin 0 0;
  
      padding: $label-horizontal-vertical-padding $label-horizontal-padding;
      min-width: $label-horizontal-min-width;
      text-align: center;
    }
  }
  
  @if($use-label-variation-circular) {
    /*-------------------
          Circular
    --------------------*/
  
    .ui.circular.labels .label,
    .ui.circular.label {
      min-width: $label-circular-min-size;
      min-height: $label-circular-min-size;
  
      padding: $label-circular-padding !important;
  
      line-height: 1em;
      text-align: center;
      border-radius: $circular-radius;
    }
    .ui.empty.circular.labels .label,
    .ui.empty.circular.label {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      width: $label-empty-circle-size;
      height: $label-empty-circle-size;
      vertical-align: baseline;
    }
  }
  
  @if($use-label-type-pointing) {
    /*-------------------
          Pointing
    --------------------*/
  
    .ui.pointing.label {
      position: relative;
    }
  
    .ui.attached.pointing.label {
      position: absolute;
    }
  
    .ui.pointing.label:before {
      background-color: inherit;
      background-image: inherit;
      border-width: 0;
      border-style: solid;
      border-color: $label-pointing-border-color;
    }
    /* Arrow */
    .ui.pointing.label:before {
      position: absolute;
      content: '';
      transform: rotate(45deg);
      background-image: none;
  
      z-index: $label-pointing-triangle-z-index;
      width: $label-pointing-triangle-size;
      height: $label-pointing-triangle-size;
      transition: $label-pointing-triangle-transition;
    }
  
    /*--- Above ---*/
    .ui.pointing.label,
    .ui[class*="pointing above"].label {
      margin-top: $label-pointing-vertical-distance;
    }
    .ui.pointing.label:before,
    .ui[class*="pointing above"].label:before {
      border-width: $label-border-width 0 0 $label-border-width;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      top: 0;
      left: 50%;
    }
    /*--- Below ---*/
    .ui[class*="bottom pointing"].label,
    .ui[class*="pointing below"].label {
      margin-top: 0;
      margin-bottom: $label-pointing-vertical-distance;
    }
    .ui[class*="bottom pointing"].label:before,
    .ui[class*="pointing below"].label:before {
      border-width: 0 $label-border-width $label-border-width 0;
      top: auto;
      right: auto;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      top: 100%;
      left: 50%;
    }
    /*--- Left ---*/
    .ui[class*="left pointing"].label {
      margin-top: 0;
      margin-left: $label-pointing-horizontal-distance;
    }
    .ui[class*="left pointing"].label:before {
      border-width: 0 0 $label-border-width $label-border-width;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      bottom: auto;
      right: auto;
      top: 50%;
      left: 0;
    }
    /*--- Right ---*/
    .ui[class*="right pointing"].label {
      margin-top: 0;
      margin-right: $label-pointing-horizontal-distance;
    }
    .ui[class*="right pointing"].label:before {
      border-width: $label-border-width $label-border-width 0 0;
      transform: translateX(50%) translateY(-50%) rotate(45deg);
      top: 50%;
      right: 0;
      bottom: auto;
      left: auto;
    }
  }
  
  
  @if($use-label-variation-basic-pointing) {
    /* Basic Pointing */
  
    /* Pointing */
    .ui.basic.pointing.label:before {
      border-color: inherit;
    }
  
    /*--- Above ---*/
    .ui.basic.pointing.label:before,
    .ui.basic[class*="pointing above"].label:before {
      margin-top: $label-basic-pointing-triangle-offset;
    }
    /*--- Below ---*/
    .ui.basic[class*="bottom pointing"].label:before,
    .ui.basic[class*="pointing below"].label:before {
      bottom: auto;
      top: 100%;
      margin-top: -$label-basic-pointing-triangle-offset;
    }
    /*--- Left ---*/
    .ui.basic[class*="left pointing"].label:before {
      top: 50%;
      left: $label-basic-pointing-triangle-offset;
    }
    /*--- Right ---*/
    .ui.basic[class*="right pointing"].label:before {
      top: 50%;
      right: $label-basic-pointing-triangle-offset;
    }
  }
  
  
  @if($use-label-type-floating) {
    /*------------------
      Floating Label
    -------------------*/
  
    .ui.floating.label {
      position: absolute;
      z-index: $label-floating-z-index;
      top: $label-floating-top-offset;
      right: 0;
      white-space: nowrap;
      transform: translateX(50%);
    }
    .ui.right.aligned.floating.label {
      transform: translateX($label-floating-align-offset);
    }
    .ui.left.floating.label {
      left:0;
      right:auto;
      transform: translateX(-50%);
    }
    .ui.left.aligned.floating.label {
      transform: translateX(-$label-floating-align-offset);
    }
    .ui.bottom.floating.label {
      top: auto;
      bottom: $label-floating-bottom-offset;
    }
  }
  
  /*-------------------
          Sizes
  --------------------*/
  
  .ui.mini.labels .label,
  .ui.mini.label {
    font-size: $label-mini;
  }
  .ui.tiny.labels .label,
  .ui.tiny.label {
    font-size: $label-tiny;
  }
  .ui.small.labels .label,
  .ui.small.label {
    font-size: $label-small;
  }
  .ui.labels .label,
  .ui.label {
    font-size: $label-medium;
  }
  .ui.large.labels .label,
  .ui.large.label {
    font-size: $label-large;
  }
  .ui.big.labels .label,
  .ui.big.label {
    font-size: $label-big;
  }
  .ui.huge.labels .label,
  .ui.huge.label {
    font-size: $label-huge;
  }
  .ui.massive.labels .label,
  .ui.massive.label {
    font-size: $label-massive;
  }
}

@import '../../themes/default/elements/label.style';