
// @require ../label.scss

//TODO: Write it better
//TODO: Modularize it
//TODO: Add corners support
//FIXME: Ribbon.right cause an overflowing bug in IE and Edge

/* RIBBON */

.label.ribbon {

  @include z-depth ( $label-ribbon-z-depth, $label-ribbon-z-depth-force, $label-ribbon-z-depth-basic );

  /* BEFORE / AFTER */

  &.ribbon-left:before,
  &.ribbon-right:after {
    position: absolute;
    z-index: -1;
    content: '';
    border: ( $label-ribbon-fold-size / 2 ) solid transparent;
    border-top-color: inherit;
    bottom: - $label-ribbon-fold-size;
  }

  /* LEFT */

  &.ribbon-left {

    @include border-left-radius ( 0 );
    left: calc( (#{$gutter} + #{$label-ribbon-fold-size}) * -1 );
    padding-left: calc(#{$label-padding-x} + #{$gutter});

    &:before {
      left: 0;
      border-right-color: inherit;
    }

  }

  /* LEFT & RIGHT */

  &.ribbon-left.ribbon-right {
    width: calc(100% + #{($gutter * 2)} + #{($label-ribbon-fold-size * 2)});
  }

  /* RIGHT */

  &.ribbon-right {

    @include border-right-radius ( 0 );
    padding-right: calc(#{$label-padding-x} + #{$gutter});

    &:after {
      right: 0;
      border-left-color: inherit;
    }

  }

  /* ONLY RIGHT */

  //FIXME: It is a bit off

  &.ribbon-right:not(.ribbon-left) {
    left: calc(100% + #{$gutter} + #{$label-ribbon-fold-size});
    transform: translateX(-100%);
  }

  /* BORDERED */

  &.bordered {

    /* BEFORE / AFTER */

    &.ribbon-left:before,
    &.ribbon-right:after {
      bottom: calc( (#{$border-width} + #{$label-ribbon-fold-size}) * -1 );
    }

    /* BEFORE */

    &.ribbon-left:before {
      left: - $border-width;
    }

    /* AFTER */

    &.ribbon-right:after {
      right: - $border-width;
    }

  }

}
