// @author    : Adarsh Pastakia
// @version   : 5.0.0
// @copyright : 2019
// @license   : MIT

.ui {
  &-block {
    display: block;
  }

  &-inline {
    display: inline;
  }

  &-inline-block {
    display: inline-block;
  }

  &-hide {
    display: none;
  }

  &-hidden {
    visibility: hidden;
  }

  &-opacity-1 {
    opacity: 1;
  }
  &-opacity-0 {
    opacity: 0;
  }

  &-selectable {
    @include text-select();
  }

  &-fade-in {
    opacity: 0;
    transition: opacity 0.2s;

    &--50 {
      opacity: 0.5;
      transition: opacity 0.2s;
    }

    &:hover,
    &--50:hover {
      opacity: 1;
    }
  }

  &-float--left {
    float: left;
  }

  &-float--right {
    float: right;
  }

  &-ellipsis {
    @include ellipsis();
  }

  &-clearfix {
    @include clearfix();
  }

  &-clip {
    @include clip();
  }

  &-paper {
    border-radius: $base-border-radius;
  }

  &-text-divider {
    border-width: 1px 0 0;
    margin: 2rem 0;
    padding: 0;

    legend {
      padding: 0 1em;
      text-align: center;
    }
  }

  &-sticky {
    @include sticky();

    &--top {
      top: 0;
    }

    &--bottom {
      bottom: 0;
    }
  }

  &-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    // Temporary removed => need to analyse the impact on performance
    // @include enable-gpu();

    &--y {
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
      @include enable-gpu();
    }

    &--no {
      overflow: hidden;
    }
  }

  &-border {

    &,
    &--xy {
      border: 1px solid transparent;
    }

    &--x {
      @include property-prefix(border-start, 1px solid transparent, border-left);
      @include property-prefix(border-end, 1px solid transparent, border-right);

      &--0 {
        @include property-prefix(border-start, 0, border-left);
        @include property-prefix(border-end, 0, border-right);
      }
    }

    &--s {
      @include property-prefix(border-start, 1px solid transparent, border-left);

      &--0 {
        @include property-prefix(border-start, 0, border-left);
      }
    }

    &--e {
      @include property-prefix(border-end, 1px solid transparent, border-right);

      &--0 {
        @include property-prefix(border-end, 0, border-right);
      }
    }

    &--y {
      border-bottom: 1px solid transparent;
      border-top: 1px solid transparent;

      &--0 {
        border-bottom: 0;
        border-top: 0;
      }
    }

    &--t {
      border-top: 1px solid transparent;

      &--0 {
        border-top: 0;
      }
    }

    &--b {
      border-bottom: 1px solid transparent;

      &--0 {
        border-bottom: 0;
      }
    }

    &--0 {
      border: 0;
    }

    &--sm {
      border-width: 2px;
    }

    &--md {
      border-width: 4px;
    }

    &--lg {
      border-width: 6px;
    }

    &--xl {
      border-width: 8px;
    }
  }

  &-cursor {
    &-pointer {
      cursor: pointer;
    }

    &-not-allowed {
      cursor: not-allowed;
    }
  }
}

@mixin make-spacing($property, $space, $size: null, $bp: null) {
  .ui-#{$property} {
    &#{$size}#{$bp} {
      &#{&}#{&} {
        #{$property}: $space;
      }
    }

    &--x#{$size}#{$bp} {
      &#{&}#{&} {
        #{$property}-left: $space;
        #{$property}-right: $space;
      }
    }

    &--s#{$size}#{$bp} {
      &#{&}#{&} {
        @include property-prefix(#{$property}-start, $space, #{$property}-left);
      }
    }

    &--e#{$size}#{$bp} {
      &#{&}#{&} {
        @include property-prefix(#{$property}-end, $space, #{$property}-right);
      }
    }

    &--y#{$size}#{$bp} {
      &#{&}#{&} {
        #{$property}-top: $space;
        #{$property}-bottom: $space;
      }
    }

    &--t#{$size}#{$bp} {
      &#{&}#{&} {
        #{$property}-top: $space;
      }
    }

    &--b#{$size}#{$bp} {
      &#{&}#{&} {
        #{$property}-bottom: $space;
      }
    }
  }
}

@include make-spacing(margin, 0, "--0");
@include make-spacing(margin, $base-spacing);
@include make-spacing(margin, $base-spacing * 0.25, --xxs);
@include make-spacing(margin, $base-spacing * 0.5, --xs);
@include make-spacing(margin, $base-spacing * 0.75, --sm);
@include make-spacing(margin, $base-spacing * 1.5, --md);
@include make-spacing(margin, $base-spacing * 2, --lg);
@include make-spacing(margin, $base-spacing * 3, --xl);
@include make-spacing(padding, 0, "--0");
@include make-spacing(padding, $base-spacing);
@include make-spacing(padding, $base-spacing * 0.25, --xxs);
@include make-spacing(padding, $base-spacing * 0.5, --xs);
@include make-spacing(padding, $base-spacing * 0.75, --sm);
@include make-spacing(padding, $base-spacing * 1.5, --md);
@include make-spacing(padding, $base-spacing * 2, --lg);
@include make-spacing(padding, $base-spacing * 3, --xl);

@each $prefix,
$size in $breakpoints {
  @media only screen and (max-width: $size) {
    @include make-spacing(margin, 0, "--0", \@#{$prefix});
    @include make-spacing(margin, $base-spacing, \@#{$prefix});
    @include make-spacing(margin, $base-spacing * 0.25, --xxs, \@#{$prefix});
    @include make-spacing(margin, $base-spacing * 0.5, --xs, \@#{$prefix});
    @include make-spacing(margin, $base-spacing * 0.75, --sm, \@#{$prefix});
    @include make-spacing(margin, $base-spacing * 1.5, --md, \@#{$prefix});
    @include make-spacing(margin, $base-spacing * 2, --lg, \@#{$prefix});
    @include make-spacing(margin, $base-spacing * 3, --xl, \@#{$prefix});
    @include make-spacing(padding, 0, "--0", \@#{$prefix});
    @include make-spacing(padding, $base-spacing, \@#{$prefix});
    @include make-spacing(padding, $base-spacing * 0.25, --xxs, \@#{$prefix});
    @include make-spacing(padding, $base-spacing * 0.5, --xs, \@#{$prefix});
    @include make-spacing(padding, $base-spacing * 0.75, --sm, \@#{$prefix});
    @include make-spacing(padding, $base-spacing * 1.5, --md, \@#{$prefix});
    @include make-spacing(padding, $base-spacing * 2, --lg, \@#{$prefix});
    @include make-spacing(padding, $base-spacing * 3, --xl, \@#{$prefix});
  }
}


.hide {
  display: none !important;
}

// Text Align
.left-align {
  text-align: left;
}

.right-align {
  text-align: right
}

.center,
.center-align {
  text-align: center;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

// No Text Select
.no-select {
  user-select: none;
}

.circle {
  border-radius: 50%;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-padding {
  padding: 0 !important;
}

.w {
  &-100 {
    width: 100%;
  }
}