@import "./theme.scss";

@import "./file-picker.scss";
@import "./select-list.scss";
@import "./toggle.scss";

.field {
  margin: 1rem 0;
}

.label {
  display: block;
  font-size: 15/16 + rem;
  color: $light_-2;
  padding: 0.25rem 0 0.5rem 0.25rem;
}

.button {
  display: block;
  cursor: pointer;
  background-color: $dark_2;
  border: none;
  border-radius: $border-radius;
  color: $light_-2;
  padding: 20px 30px;
  margin: 0 auto;
  width: 90%;
  max-width: 250px;
  transition: background-color 0.2s ease-out;

  &:focus {
    outline: none;
    box-shadow: 0 0 8px #0dbb9c, 0 0 1px #0dbb9c;
  }

  &:hover {
    background-color: lighten($dark-gray, 5%);
  }

  &:disabled {
    background-color: desaturate($dark-gray, 100%);
    opacity: 0.4;
  }

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

::placeholder {
  color: $input-placeholder-color;
}

.radio-group {
  display: flex;
  flex-direction: column;
}

.help {
  color: $danger_0;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.control {
  position: relative;
  cursor: pointer;

  & .icon {
    position: absolute;
    padding: 1rem 0;
    line-height: 1.125rem;
    padding-left: 1rem;
    font-weight: $bold-weight;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="password"],
  input[type="tel"],
  input[type="email"] {
    width: 100%;
    background-color: $input-color;
    border-radius: $border-radius;
    border: none;
    color: $input-main-color;
    padding: 1rem 1rem;
    outline: none;

    &:focus {
      box-shadow: 0 0 0.5rem rgba($input-focus-color, 0.6),
        0 0 0.125rem $input-focus-color;
    }

    &:invalid:not(:placeholder-shown) {
      color: $danger_0;
      box-shadow: 0 0 0.25rem rgba($danger_0, 0.6), 0 0 0.125rem $danger_0;
    }

    &.amount-input {
      padding-left: 1.75rem;
    }
  }

  select,
  textarea {
    width: 100%;
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    padding: 15px 40px 15px 18px;
    margin: 0;
    background-color: $input-color;
    border-radius: $border-radius;
    border: none;
    color: $light_-2;

    &:focus {
      box-shadow: 0 0 8px rgba($input-focus-color, 0.6),
        0 0 1px $input-focus-color;
    }

    &:invalid:not(:placeholder-shown) {
      color: $input-placeholder-color;
    }
  }

  .radio-item {
    position: relative;
    & label {
      font-size: $radio-font-size;
      line-height: $radio-size;
      margin: 5px 0;
      padding-left: 3rem;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  .radio-dot {
    &:before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      background-color: $radio-bg-color;
      width: $radio-size;
      height: $radio-size;
      border-radius: $radio-size;
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.3s ease-out;
      background-color: $radio-bullet-color;
      width: $bullet-size;
      height: $bullet-size;
      left: ($radio-size - $bullet-size)/2;
      top: ($radio-size - $bullet-size)/2;
      border-radius: $bullet-size;
    }
  }

  input[type="radio"] {
    opacity: 0;
    width: 0px;

    &:checked + .radio-dot {
      &:after {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
}
