@use 'colors';
@use 'fonts';

@mixin label {
  @include fonts.label;
  padding-bottom: .8em;
  display: inline-block;
}

@mixin input {
  @include fonts.Inter(1em, colors.$blue, 500);
  transition: color linear 100ms, border linear 100ms, background linear 100ms, box-shadow linear 100ms;
  background: colors.$light-blue;
  box-shadow: 0 0 5px rgba(colors.$blue, 0);
  border: solid rgba(colors.$blue, .1) 1px;
  border-radius: 5px;
  outline: none;

  &:hover {
    box-shadow: 0 0 5px rgba(colors.$blue, .1);
  }

  &:focus, &.active {
    border: solid rgba(colors.$blue, .2) 1px;
    background: white;
  }
}

@mixin instructions {
  @include fonts.Inter(.8em, rgba(colors.$blue, .5));
  margin-top: 10px;
}

@mixin field {
  margin-top: 20px;

  &:first-of-type {
    margin: 0;
  }
}

@mixin error {
  @include fonts.Inter(.8em, colors.$red);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 15px;

  > svg[stroke] {
    stroke: colors.$red;
  }

  > svg:not([stroke]) {
    fill: colors.$red;
  }

  > span {
    margin-left: 10px;
  }
}

@mixin warning {
  @include fonts.Inter(.8em, colors.$orange);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 15px;

  > svg[stroke] {
    stroke: colors.$orange;
  }

  > svg:not([stroke]) {
    fill: colors.$orange;
  }

  > span {
    margin-left: 10px;
  }
}

@mixin submit {
  margin-top: 30px;
}

@mixin form {
  > .field {
    @include field;
  }

  > .error {
    @include error;
  }

  > .warning {
    @include error;
  }

  > .submit {
    @include submit;
  }
}