// Font Family
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700&display=swap');
* {
  font-family: 'Titillium Web', sans-serif;
}

$primary: #4c00ff;
$primary--hover: #4400e6;
$primary--hover--ghost: #ede6ff;
$primary--active: #3500b3;
$primary--active--ghost: #dbccff;

$secondary: #17dbce;
$secondary--hover: #16cdc1;
$secondary--hover--ghost: #dcfbf9;
$secondary--active: #119f96;
$secondary--active--ghost: #c5f9f5;

$danger: #ff6666;
$danger--hover: #ff4d4d;
$danger--hover--ghost: #ffe6e6;
$danger--active: #ff1a1a;
$danger--active--ghost: #ffcccc;

$disabled--primary: #c6c6c6;
$disabled--secondary: #7a7a7a;

$white: #ffffff;
$black: #000000;
$gray: #767676;
$light-gray: #eeeeee;
$shadow: #bababa;


.neutron--input {
  margin-top: 0.5rem;
  font-size: 1rem;
  padding: 0.2rem 0.25rem;
  border: none;
  border-bottom: 0.01rem solid $gray;
  resize: vertical;

  &:disabled {
    cursor: not-allowed;
    border: none;

    &::placeholder {
      color: $disabled--primary;
    }
  }

  &--primary {
    &:focus {
      // &:active:not(.neutron--text-input--invalid),
      // &:focus:not(.neutron--text-input--invalid) {
      outline: 0.15rem solid $primary;
    }
  }

  &--secondary {
    &:focus {
      // &:active:not(.neutron--text-input--invalid),
      // &:focus:not(.neutron--text-input--invalid) {
      outline: 0.15rem solid $secondary;
    }
  }

  &--dark {
    background-color: $light-gray;
  }

  &--light {
    background-color: $white;
  }

  // &--invalid {
  //   outline: 0.15rem solid $danger;
  // }
}

.neutron--btn {
  font-size: 1rem;
  border: none;
  min-width: 4rem;
  max-width: 20rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;

  &--primary {
    background-color: $primary;
    color: $white;

    &:hover,
    &:focus {
      background-color: $primary--hover;
      cursor: pointer;
    }

    &:active {
      background-color: $primary--active;
    }

    &:disabled {
      background-color: $disabled--primary;
      color: $disabled--secondary;

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

    &--stroked {
      background-color: $white;
      color: $primary;
      border-color: $primary;
      border-width: 0.01rem;
      border-style: solid;
      transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

      &:hover,
      &:focus {
        background-color: $primary;
        color: $white;
        cursor: pointer;
      }

      &:active {
        background-color: $primary--active;
      }

      &:disabled {
        background-color: $white;
        color: $disabled--primary;
        border-color: $disabled--primary;

        &:hover {
          cursor: not-allowed;
        }
      }
    }
    &--ghost {
      background-color: transparent;
      color: $primary;
      transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

      &:hover,
      &:focus {
        background-color: $primary--hover--ghost;
        cursor: pointer;
      }

      &:active {
        background-color: $primary--active--ghost;
      }

      &:disabled {
        background-color: transparent;
        color: $disabled--primary;

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

  &--secondary {
    background-color: $secondary;
    color: $black;

    &:hover,
    &:focus {
      background-color: $secondary--hover;
      cursor: pointer;
    }

    &:active {
      background-color: $secondary--active;
    }

    &:disabled {
      background-color: $disabled--primary;
      color: $disabled--secondary;

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

    &--stroked {
      background-color: $white;
      color: $secondary;
      border-color: $secondary;
      border-width: 0.01rem;
      border-style: solid;
      transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

      &:hover,
      &:focus {
        background-color: $secondary;
        color: $white;
        cursor: pointer;
      }

      &:active {
        background-color: $secondary--active;
      }

      &:disabled {
        background-color: $white;
        color: $disabled--primary;
        border-color: $disabled--primary;

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

    &--ghost {
      background-color: transparent;
      color: $secondary;
      transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

      &:hover,
      &:focus {
        background-color: $secondary--hover--ghost;
        cursor: pointer;
      }

      &:active {
        background-color: $secondary--active--ghost;
      }

      &:disabled {
        background-color: transparent;
        color: $disabled--primary;

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

  &--danger {
    background-color: $danger;
    color: $black;

    &:hover,
    &:focus {
      background-color: $danger--hover;
      cursor: pointer;
    }

    &:active {
      background-color: $danger--active;
    }

    &:disabled {
      background-color: $disabled--primary;
      color: $disabled--secondary;

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

    &--stroked {
      background-color: $white;
      color: $danger;
      border-color: $danger;
      border-width: 0.01rem;
      border-style: solid;
      transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

      &:hover,
      &:focus {
        background-color: $danger;
        color: $white;
        cursor: pointer;
      }

      &:active {
        background-color: $danger--active;
      }

      &:disabled {
        background-color: $white;
        color: $disabled--primary;
        border-color: $disabled--primary;

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

    &--ghost {
      background-color: transparent;
      color: $danger;
      transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

      &:hover,
      &:focus {
        background-color: $danger--hover--ghost;
        cursor: pointer;
      }

      &:active {
        background-color: $danger--active--ghost;
      }

      &:disabled {
        background-color: transparent;
        color: $disabled--primary;

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