@import "../abstract/variables";

input,
textarea {
    padding: 10px;
    width: -webkit-fill-available;
    border: 1px solid $section-border-color;
    border-radius: 5px;
    font-size: 16px !important;
    font-family: $font-family-primary !important;
    color: $secondary-text-color;
    background-color: $primary-color;

    &::placeholder {
        color: $tertiary-text-color;
    }

    &:focus {
        border-color: $focus-primary-color;
        box-shadow: 0 0 8px rgba($focus-primary-color, 0.5);
        background-color: #fff;
    }

    &.error {
        border-color: $status-closed-color;
        box-shadow: 0 0 8px rgba($status-closed-color, 0.5);
    }
}

.input-group {
    margin-bottom: 15px;

    label {
        font-size: $font-size-subtitle;
        margin-bottom: 5px;
        color: $label-text-color;
    }

    .error-message {
        color: $warn-color;
    }

    @media (max-width: 768px) {
        margin-bottom: 13px;
    
        label { font-size: 13px;}
      }
    
      @media (max-width: 480px) {
        margin-bottom: 3px;
    
        label { font-size: 12px; }
      }
}

.input-cost{
    display: flex;
    gap: 10px;
}