/// Provides utility classes for universal elements.
/// @group utilities
/// @author Richard Davis
/// @example
///   // Full width input field
///   <input type="text" class="u-Element--full">
///   // Long input field
///   <input type="text" class="u-Element--long">
///   // Medium input field
///   <input type="text" class="u-Element--medium">
///   // Short input field
///   <input type="text" class="u-Element--short">
.u-Element {
  &--full {
    width: 100%;
  }

  &--long {
    @include breakpoint-s {
      width: 80%;
      min-width: 390px;
    }

    @include breakpoint-m {
      width: 70%;
      min-width: 420px;
    }

    @include breakpoint-l {
      width: 60%;
      min-width: 440px;
    }
  }

  &--medium {
    @include breakpoint-s {
      width: 60%;
      min-width: 310px;
    }

    @include breakpoint-m {
      width: 50%;
      min-width: 331px;
    }

    @include breakpoint-l {
      width: 40%;
      min-width: 304px;
    }
  }

  &--short {
    @include breakpoint-s {
      width: 40%;
      min-width: 198px;
    }

    @include breakpoint-m {
      width: 30%;
      min-width: 195px;
    }

    @include breakpoint-l {
      width: 20%;
      min-width: 147px;
    }
  }
}