////
///
/// Form Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `form` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 18 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Form
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "sass:map";
@use "../../01-core/external" as *;
@use "../../23-layout/breakpoints";

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- form-row  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--ss-spacing-6);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // -- form-group  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-group {
        display: flex;
        flex-direction: column;
        gap: var(--ss-spacing-2);
    }

    // -- form-label  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-label {

        .ss-c-required {
            color: var(--ss-color-error);
        }
    }

    // -- form-textarea  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-textarea {
        width: 100%;
        padding: var(--ss-spacing-3) var(--ss-spacing-4);
        font-size: var(--ss-font-size-base);
        border: q(1) solid var(--ss-color-gray-200);
        border-radius: var(--ss-radius-none);
        background: var(--ss-color-white);
        transition: all var(--ss-duration-200) ease;

        &:focus {
            outline: none;
            border-color: var(--ss-color-primary);
            box-shadow: 0 0 0 q(3) color-mix(in srgb, var(--ss-color-primary) 10%, transparent);
        }
    }

    // -- form-group--checkbox  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-group--checkbox {
        flex-direction: row;
    }

    // -- checkbox-label  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: var(--ss-spacing-3);
        cursor: pointer;

        input[type="checkbox"] {
            width: q(20);
            height: q(20);
            margin-top: q(2);
            cursor: pointer;
        }
    }

    // -- checkbox-text  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-checkbox-text {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-600);

        a {
            color: var(--ss-color-primary);
            text-decoration: underline;
        }
    }

    // -- form-actions  (from site-scape_ventures/src/static/scss/components/_forms.scss) --
    .ss-c-form-actions {
        margin-top: var(--ss-spacing-4);
    }

    // -- form-select  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-select {
        // (stripped @extend)
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--ss-spacing-3) center;
        background-size: q(20);
        padding-right: var(--ss-spacing-10);
    }

    // -- form-radio  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-radio {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-3);
        cursor: pointer;

        input {
            width: q(18);
            height: q(18);
            accent-color: var(--ss-color-white);
        }

        span {
            font-size: var(--ss-font-size-sm);
            color: var(--ss-color-gray-700);
        }
    }

    // -- form-error  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-error {
        color: var(--ss-color-white);
        font-size: var(--ss-font-size-sm);
        margin-top: var(--ss-spacing-1);
    }

    // -- form-help  (from site-blockfoundation_io/src/static/scss/components/_forms.scss) --
    .ss-c-form-help {
        color: var(--ss-color-gray-500);
        font-size: var(--ss-font-size-sm);
        margin-top: var(--ss-spacing-1);
    }

    // -- form  (from site-kockums_foundation/src/static/scss/components/_forms.scss) --
    .ss-c-form {
      &__group {
        margin-bottom: var(--ss-spacing-6);
      }


      &__input,
      &__textarea,
      &__select {
        width: 100%;
        padding: var(--ss-spacing-3) var(--ss-spacing-4);
        font-size: var(--ss-font-size-base);
        color: var(--ss-color-gray-800);
        background-color: var(--ss-color-white);
        border: q(1) solid var(--ss-color-gray-200);
        border-radius: 0;
        transition: all var(--ss-duration-150) ease;

        &::placeholder {
          color: var(--ss-color-gray-300);
        }

        &:focus {
          outline: none;
          border-color: var(--ss-color-gray-500);
          box-shadow: 0 0 0 q(3) color-mix(in srgb, var(--ss-color-gray-500) 15%, transparent);
        }

        &:disabled {
          background-color: var(--ss-color-gray-100);
          cursor: not-allowed;
        }

        &--error {
          border-color: var(--ss-color-error);

          &:focus {
            box-shadow: 0 0 0 q(3) color-mix(in srgb, var(--ss-color-error) 15%, transparent);
          }
        }
      }

      &__textarea {
        min-height: q(120);
        resize: vertical;
      }

      &__select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--ss-spacing-3) center;
        background-size: q(16);
        padding-right: var(--ss-spacing-10);
      }

      &__hint {
        margin-top: var(--ss-spacing-2);
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-500);
      }


      &__row {
        display: grid;
        gap: var(--ss-spacing-6);

        // (stripped @include block)

      }
    }

    // -- radio  (from site-kockums_foundation/src/static/scss/components/_forms.scss) --
    .ss-c-radio {

      input {
        width: q(20);
        height: q(20);
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
      }

    }

    // -- form-label--checkbox  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-label--checkbox {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-600);
        text-transform: none;
        letter-spacing: normal;

        a {
            color: var(--ss-color-text);
            text-decoration: underline;

            &:hover {
                color: var(--ss-color-primary);
            }
        }
    }

    // -- form-checkbox  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-checkbox {
        width: q(20);
        height: q(20);
        margin-top: q(2);
        accent-color: var(--ss-color-black);
        cursor: pointer;
    }

    // -- form-textarea--error  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-textarea--error {
        border-color: var(--ss-color-error);

        &:focus {
            border-color: var(--ss-color-error);
        }
    }

    // -- form-success  (from site-matter_tech/src/static/scss/components/_forms.scss) --
    .ss-c-form-success {
        padding: unset;
        background-color: color-mix(in srgb, var(--ss-color-success) 10%, transparent);
        border: q(1) solid var(--ss-color-success);
        border-radius: 0;
        color: color-mix(in srgb, var(--ss-color-success) 85%, var(--ss-color-black));
    }
}