/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-forms.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * FRAMEWORK FOUNDATION
 *
 * Purpose
 * -------
 * Universal Form Engine.
 *
 * Used By
 * -------
 * Search
 * Login
 * Register
 * Profile
 * Settings
 * Admin
 * Filters
 * Comments
 *
 * ============================================================================
 */


/* ==========================================================================
   Form
   ========================================================================== */

.gs-form{

    display:flex;

    flex-direction:column;

    gap:var(--gs-space-4);

}


/* ==========================================================================
   Group
   ========================================================================== */

.gs-form-group{

    display:flex;

    flex-direction:column;

    gap:var(--gs-space-2);

}


/* ==========================================================================
   Label
   ========================================================================== */

.gs-label{

    font-size:var(--gs-font-size-sm);

    font-weight:var(--gs-font-weight-semibold);

    color:var(--gs-color-text);

}


/* ==========================================================================
   Input
   ========================================================================== */

.gs-input,

.gs-select,

.gs-textarea{

    width:100%;

    padding:14px 18px;

    border:var(--gs-border);

    border-radius:var(--gs-radius-lg);

    background:var(--gs-color-surface);

    color:var(--gs-color-text);

    font-size:var(--gs-font-size-md);

    transition:var(--gs-transition-fast);

}


/* ==========================================================================
   Focus
   ========================================================================== */

.gs-input:focus,

.gs-select:focus,

.gs-textarea:focus{

    border-color:var(--gs-color-primary);

    box-shadow:

        0 0 0 3px rgba(95,143,123,.20);

}


/* ==========================================================================
   Placeholder
   ========================================================================== */

.gs-input::placeholder,

.gs-textarea::placeholder{

    color:var(--gs-color-text-muted);

}


/* ==========================================================================
   Search Input
   ========================================================================== */

.gs-search-input{

    width:100%;

    padding:16px 22px;

    padding-left:56px;

    border:var(--gs-border);

    border-radius:999px;

    background:var(--gs-color-surface);

    color:var(--gs-color-text);

    font-size:var(--gs-font-size-lg);

}


/* ==========================================================================
   Search Wrapper
   ========================================================================== */

.gs-search-wrapper{

    position:relative;

}


/* ==========================================================================
   Search Icon
   ========================================================================== */

.gs-search-icon{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--gs-color-text-muted);

    pointer-events:none;

}


/* ==========================================================================
   Clear Button
   ========================================================================== */

.gs-search-clear{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

}


/* ==========================================================================
   Checkbox
   ========================================================================== */

.gs-checkbox{

    width:18px;

    height:18px;

    accent-color:var(--gs-color-primary);

}


/* ==========================================================================
   Radio
   ========================================================================== */

.gs-radio{

    accent-color:var(--gs-color-primary);

}


/* ==========================================================================
   Switch
   ========================================================================== */

.gs-switch{

    accent-color:var(--gs-color-primary);

}


/* ==========================================================================
   Error
   ========================================================================== */

.gs-input-error{

    border-color:var(--gs-color-error);

}

.gs-error-text{

    font-size:13px;

    color:var(--gs-color-error);

}


/* ==========================================================================
   Success
   ========================================================================== */

.gs-input-success{

    border-color:var(--gs-color-success);

}


/* ==========================================================================
   Disabled
   ========================================================================== */

.gs-input:disabled,

.gs-select:disabled,

.gs-textarea:disabled{

    opacity:.60;

    cursor:not-allowed;

}


/* ==========================================================================
   Readonly
   ========================================================================== */

.gs-input[readonly],

.gs-textarea[readonly]{

    background:rgba(255,255,255,.04);

}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

    .gs-search-input{

        font-size:16px;

        padding:14px 18px;

        padding-left:52px;

    }

}