/*
    spacing.css provides utility classes for consistent spacing throughout the application.

 */

@layer spacing {




    .less-block-margin {
        margin-block: var(--space-sm);
    }

    .block-margin {
        margin-block: var(--space-lg);
    }

    .more-block-margin {
        margin-block: var(--space-xl);
    }



    .less-inline-margin {
        margin-inline: var(--space-sm);
    }

    .inline-margin {
        margin-inline: var(--space-lg);
    }

    .more-inline-margin {
        margin-inline: var(--space-xl);
    }



    .less-top-margin {
        margin-top: var(--space-sm);
    }

    .top-margin {
        margin-top: var(--space-lg);
    }

    .more-top-margin {
        margin-top: var(--space-xl);
    }



    .no-bottom-margin {
        margin-bottom: 0;
    }

    .less-bottom-margin {
        margin-bottom: var(--space-sm);
    }

    .bottom-margin {
        margin-bottom: var(--space-lg);
    }

    .more-bottom-margin {
        margin-bottom: var(--space-xl);
    }



    .flex {
        display: flex;
        gap: var(--space-lg);

        &.wrap {
            flex-wrap: wrap;
        }

        &.big-gap {
            gap: var(--space-2xl);
        }

        &.small-gap {
            gap: var(--space-sm);
        }

        &.minimal-gap {
            gap: 0.33rem;  /* intentional outlier; not in scale */
        }

        &.bottom {
            align-items: flex-end;
        }

        &.center {
            align-items: center;
        }

        &.vertical {
            flex-direction: column;
        }

        &.spread {
            justify-content: space-between;
        }
    }


    .constrained {
        max-width: min(600px, 100%);
    }


    columned {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-md) 2.5rem;  /* 2.5rem intentional outlier; not in scale */

        @media(max-width: 500px) {
            grid-template-columns: 1fr;
        }

        input, output {
            margin-bottom: 0;
        }

        &.bottom {
            align-items: end;
        }

        &.center {
            align-items: center;
        }
    }


    .padded {
        padding: var(--space-lg);
    }

}