/* ===================================================
/* FORM (INPUTS)
/* ===================================================

// ====================================
// MIXINS
// ====================================
=create-input
  +input-control
  width: 100%
  line-height: $line-height
  font-size: $font-size
  color: $font-color
  border:
    color: $input-border-color
    radius: $border-radius
  // Pseudo
  &::placeholder
    color: $color-grey-75
    opacity: $opacity-muted
  &:hover,
  &:focus,
  &:active
    border-color: map-get($color-map, primary)
  // Modifiers
  //=== STYLES ===//
  @each $type, $color in $input-color-map
    &.make-#{$type}
      border-color: $color
      // Pseudo
      &:focus,
      &:active
        box-shadow: 0 0 1.2rem rgba($color, $opacity-muted) !important
    //=== ROUNDNESS ===//
    &.make-rounded
      border-radius: 5.0rem
    //=== SIZES ===//
    &.make-smaller
      font-size: 1.0rem
    &.make-small
      font-size: 1.2rem
    &.make-large
      padding: 0.6rem 1.8rem
      font-size: 1.8rem
    &.make-larger
      padding: 0.8rem 2.4rem
      font-size: 2.0rem
    
// ====================================
// INPUTS
// ====================================
// --- TEXTS ---
.input
  +create-input

// --- LABELS ---
.label
  display: inline-flex
  flex:
    grow: 1
    shrink: 0
    basis: auto
  justify-content: flex-start
  margin-bottom: 0.5rem
  font:
    size: $font-size
    weight: $font-weight-bold
  color: $font-color

// --- SELECT ---
// sass-lint:disable property-sort-order
.select
  @extend .input
  background:
    image: url('https://png.icons8.com/expand-arrow/win8/12')
    position: calc(100% - 1.0rem)
    repeat: no-repeat
  // Pseudo
  &::-ms-expand
    display: none
// sass-lint:enable property-sort-order

// --- TEXT AREA ---
.textarea
  @extend .input
  height: 12.0rem
  font:
    family: inherit
    size: $font-size
  resize: vertical