@use "@/styles/common/variables" as *;
@use "@/styles/common/mixins" as *;

.lofty-reset-style{
  input[type="text"],
  input[type="number"],
  select,
  textarea {
    width: 100%;
    padding: 5px 12px;
    border: 1px solid $gray-600;
    border-radius: $radius-small;
    font-size: 14px;
    box-shadow: none;
    &:not(textarea) {
      height: 40px;
    }
    &:hover,
    &:focus {
      border-color: $color-theme;
      box-shadow: none;
      outline: none;
    }
    &[disabled],
    &[readonly] {
      background-color: $gray-100;
      color: $gray-600;
      cursor: no-drop;
      &:hover,
      &:focus {
        border-color: $gray-600 !important;
      }
    }
    &::placeholder {
      color: $gray-400;
    }
  }
  input[type="radio"] {
    width: 16px;
    height: 16px;
    border: 1px solid $gray-600;
    box-shadow: none;
    &:focus {
      border-color: $gray-600;
      box-shadow: none;
      outline: none;
    }
    &:checked::before {
      width: 10px;
      height: 10px;
      margin: 2px;
      background-color: $color-theme;
    }
  }
  
  .mt20 {
    margin-top: 20px;
  }
  .mt30 {
    margin-top: 30px;
  }
}