// bootstrap grid system convert my frmx grid system
// 1.0.0
@use 'sass:map';
@use 'sass:math';

// Breakpoints
$frmx-breakpoints: (
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

// Container max-widths
$frmx-container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
);

// Grid columns and gutter
$frmx-grid-columns: 12;
$frmx-gutter-width: 30px;

// Box sizing
*,
*::before,
*::after {
    box-sizing: border-box;
}

// Container
.frmx-container,
.frmx-container-fluid {
    width: 100%;
    padding-right: calc($frmx-gutter-width / 2);
    padding-left: calc($frmx-gutter-width / 2);
    margin-right: auto;
    margin-left: auto;
}

.frmx-container-fluid {
    max-width: 100%;
}

// Container responsive max-widths
@each $breakpoint, $width in $frmx-breakpoints {
    @media (min-width: $width) {
        .frmx-container {
            max-width: map.get($frmx-container-max-widths, $breakpoint);
        }
    }
}

// Row
.frmx-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc($frmx-gutter-width / -2);
    margin-left: calc($frmx-gutter-width / -2);
}

// Row modifiers
.frmx-row-no-gutters {
    margin-right: 0;
    margin-left: 0;

    >[class*="frmx-col"] {
        padding-right: 0;
        padding-left: 0;
    }
}

// Column base
[class*="frmx-col"] {
    position: relative;
    width: 100%;
    padding-right: calc($frmx-gutter-width / 2);
    padding-left: calc($frmx-gutter-width / 2);
}

// Auto column
.frmx-col {
    flex: 1 0 0%;
}

.frmx-col-auto {
    flex: 0 0 auto;
    width: auto;
}

// Generate columns for default (no breakpoint)
@for $i from 1 through $frmx-grid-columns {
    .frmx-col-#{$i} {
        flex: 0 0 auto;
        width: math.percentage(math.div($i, $frmx-grid-columns));
    }
}

// Generate offset classes for default
@for $i from 0 through ($frmx-grid-columns - 1) {
    .frmx-offset-#{$i} {
        margin-left: math.percentage(math.div($i, $frmx-grid-columns));
    }
}

// Generate responsive columns and offsets
@each $breakpoint, $width in $frmx-breakpoints {
    @media (min-width: $width) {

        // Auto columns
        .frmx-col-#{$breakpoint} {
            flex: 1 0 0%;
        }

        .frmx-col-#{$breakpoint}-auto {
            flex: 0 0 auto;
            width: auto;
        }

        // Numbered columns
        @for $i from 1 through $frmx-grid-columns {
            .frmx-col-#{$breakpoint}-#{$i} {
                flex: 0 0 auto;
                width: math.percentage(math.div($i, $frmx-grid-columns));
            }
        }

        // Offset classes
        @for $i from 0 through ($frmx-grid-columns - 1) {
            .frmx-offset-#{$breakpoint}-#{$i} {
                margin-left: math.percentage(math.div($i, $frmx-grid-columns));
            }
        }

        // Order classes
        .frmx-order-#{$breakpoint}-first {
            order: -1;
        }

        .frmx-order-#{$breakpoint}-last {
            order: $frmx-grid-columns + 1;
        }

        @for $i from 0 through $frmx-grid-columns {
            .frmx-order-#{$breakpoint}-#{$i} {
                order: $i;
            }
        }
    }
}

// Order classes (default)
.frmx-order-first {
    order: -1;
}

.frmx-order-last {
    order: $frmx-grid-columns + 1;
}

@for $i from 0 through $frmx-grid-columns {
    .frmx-order-#{$i} {
        order: $i;
    }
}

// Flexbox alignment utilities
.frmx-justify-content-start {
    justify-content: flex-start;
}

.frmx-justify-content-end {
    justify-content: flex-end;
}

.frmx-justify-content-center {
    justify-content: center;
}

.frmx-justify-content-between {
    justify-content: space-between;
}

.frmx-justify-content-around {
    justify-content: space-around;
}

.frmx-justify-content-evenly {
    justify-content: space-evenly;
}

.frmx-align-items-start {
    align-items: flex-start;
}

.frmx-align-items-end {
    align-items: flex-end;
}

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

.frmx-align-items-baseline {
    align-items: baseline;
}

.frmx-align-items-stretch {
    align-items: stretch;
}

.frmx-align-self-start {
    align-self: flex-start;
}

.frmx-align-self-end {
    align-self: flex-end;
}

.frmx-align-self-center {
    align-self: center;
}

.frmx-align-self-baseline {
    align-self: baseline;
}

.frmx-align-self-stretch {
    align-self: stretch;
}

// Display utilities
.frmx-d-none {
    display: none;
}

.frmx-d-block {
    display: block;
}

.frmx-d-flex {
    display: flex;
}

.frmx-d-inline-flex {
    display: inline-flex;
}

.frmx-d-grid {
    display: grid;
}

// Responsive display utilities
@each $breakpoint, $width in $frmx-breakpoints {
    @media (min-width: $width) {
        .frmx-d-#{$breakpoint}-none {
            display: none;
        }

        .frmx-d-#{$breakpoint}-block {
            display: block;
        }

        .frmx-d-#{$breakpoint}-flex {
            display: flex;
        }

        .frmx-d-#{$breakpoint}-inline-flex {
            display: inline-flex;
        }

        .frmx-d-#{$breakpoint}-grid {
            display: grid;
        }
    }
}

// Gap utilities
.frmx-gap-0 {
    gap: 0;
}

.frmx-gap-1 {
    gap: 0.25rem;
}

.frmx-gap-2 {
    gap: 0.5rem;
}

.frmx-gap-3 {
    gap: 1rem;
}

.frmx-gap-4 {
    gap: 1.5rem;
}

.frmx-gap-5 {
    gap: 3rem;
}

// Flex wrap
.frmx-flex-wrap {
    flex-wrap: wrap;
}

.frmx-flex-nowrap {
    flex-wrap: nowrap;
}

.frmx-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

// Flex direction
.frmx-flex-row {
    flex-direction: row;
}

.frmx-flex-row-reverse {
    flex-direction: row-reverse;
}

.frmx-flex-column {
    flex-direction: column;
}

.frmx-flex-column-reverse {
    flex-direction: column-reverse;
}

// Flex grow/shrink
.frmx-flex-grow-0 {
    flex-grow: 0;
}

.frmx-flex-grow-1 {
    flex-grow: 1;
}

.frmx-flex-shrink-0 {
    flex-shrink: 0;
}

.frmx-flex-shrink-1 {
    flex-shrink: 1;
}

// ============================================
// Spacing Utilities (Margin & Padding)
// ============================================

// Spacing scale
$frmx-spacers: (
    0: 0,
    1: 0.25rem,
    2: 0.5rem,
    3: 1rem,
    4: 1.5rem,
    5: 3rem
);

// Spacing properties map
$frmx-spacing-properties: (
    m: margin,
    p: padding
);

// Spacing directions map
$frmx-spacing-directions: (
    t: top,
    b: bottom,
    s: left,
    e: right
);

// Generate base spacing utilities (no breakpoint)
@each $prop-short, $prop in $frmx-spacing-properties {
    @each $size, $value in $frmx-spacers {

        // All sides: frmx-m-0, frmx-p-1, etc.
        .frmx-#{$prop-short}-#{$size} {
            #{$prop}: $value !important;
        }

        // X axis (left & right): frmx-mx-0, frmx-px-1, etc.
        .frmx-#{$prop-short}x-#{$size} {
            #{$prop}-left: $value !important;
            #{$prop}-right: $value !important;
        }

        // Y axis (top & bottom): frmx-my-0, frmx-py-1, etc.
        .frmx-#{$prop-short}y-#{$size} {
            #{$prop}-top: $value !important;
            #{$prop}-bottom: $value !important;
        }

        // Individual directions: frmx-mt-0, frmx-pb-1, etc.
        @each $dir-short, $dir in $frmx-spacing-directions {
            .frmx-#{$prop-short}#{$dir-short}-#{$size} {
                #{$prop}-#{$dir}: $value !important;
            }
        }
    }
}

// Auto margin utilities
.frmx-m-auto {
    margin: auto !important;
}

.frmx-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.frmx-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.frmx-mt-auto {
    margin-top: auto !important;
}

.frmx-mb-auto {
    margin-bottom: auto !important;
}

.frmx-ms-auto {
    margin-left: auto !important;
}

.frmx-me-auto {
    margin-right: auto !important;
}

// Generate responsive spacing utilities
@each $breakpoint, $width in $frmx-breakpoints {
    @media (min-width: $width) {
        @each $prop-short, $prop in $frmx-spacing-properties {
            @each $size, $value in $frmx-spacers {

                // All sides: frmx-m-sm-0, frmx-p-md-1, etc.
                .frmx-#{$prop-short}-#{$breakpoint}-#{$size} {
                    #{$prop}: $value !important;
                }

                // X axis: frmx-mx-sm-0, frmx-px-md-1, etc.
                .frmx-#{$prop-short}x-#{$breakpoint}-#{$size} {
                    #{$prop}-left: $value !important;
                    #{$prop}-right: $value !important;
                }

                // Y axis: frmx-my-sm-0, frmx-py-md-1, etc.
                .frmx-#{$prop-short}y-#{$breakpoint}-#{$size} {
                    #{$prop}-top: $value !important;
                    #{$prop}-bottom: $value !important;
                }

                // Individual directions: frmx-mt-sm-0, frmx-pb-md-1, etc.
                @each $dir-short, $dir in $frmx-spacing-directions {
                    .frmx-#{$prop-short}#{$dir-short}-#{$breakpoint}-#{$size} {
                        #{$prop}-#{$dir}: $value !important;
                    }
                }
            }
        }

        // Responsive auto margins
        .frmx-m-#{$breakpoint}-auto {
            margin: auto !important;
        }

        .frmx-mx-#{$breakpoint}-auto {
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .frmx-my-#{$breakpoint}-auto {
            margin-top: auto !important;
            margin-bottom: auto !important;
        }

        .frmx-mt-#{$breakpoint}-auto {
            margin-top: auto !important;
        }

        .frmx-mb-#{$breakpoint}-auto {
            margin-bottom: auto !important;
        }

        .frmx-ms-#{$breakpoint}-auto {
            margin-left: auto !important;
        }

        .frmx-me-#{$breakpoint}-auto {
            margin-right: auto !important;
        }
    }
}

// ============================================
// Shadow Utilities
// ============================================

.frmx-shadow-none {
    box-shadow: none !important;
}

.frmx-shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.frmx-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.frmx-shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

// Responsive shadow utilities
@each $breakpoint, $width in $frmx-breakpoints {
    @media (min-width: $width) {
        .frmx-shadow-#{$breakpoint}-none {
            box-shadow: none !important;
        }

        .frmx-shadow-#{$breakpoint}-sm {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
        }

        .frmx-shadow-#{$breakpoint} {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        .frmx-shadow-#{$breakpoint}-lg {
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
        }
    }
}

// ============================================
// Text Utilities
// ============================================

.frmx-text-center {
    text-align: center !important;
}

.frmx-text-start {
    text-align: left !important;
}

.frmx-text-end {
    text-align: right !important;
}

// Responsive text alignment
@each $breakpoint, $width in $frmx-breakpoints {
    @media (min-width: $width) {
        .frmx-text-#{$breakpoint}-center {
            text-align: center !important;
        }

        .frmx-text-#{$breakpoint}-start {
            text-align: left !important;
        }

        .frmx-text-#{$breakpoint}-end {
            text-align: right !important;
        }
    }
}

// ============================================
// Row Gap (g-*) Utilities for Grid
// ============================================

// Row gap classes for frmx-row
.frmx-g-0 {
    --frmx-gutter-x: 0;
    --frmx-gutter-y: 0;
}

.frmx-g-1 {
    --frmx-gutter-x: 0.25rem;
    --frmx-gutter-y: 0.25rem;
}

.frmx-g-2 {
    --frmx-gutter-x: 0.5rem;
    --frmx-gutter-y: 0.5rem;
}

.frmx-g-3 {
    --frmx-gutter-x: 1rem;
    --frmx-gutter-y: 1rem;
}

.frmx-g-4 {
    --frmx-gutter-x: 1.5rem;
    --frmx-gutter-y: 1.5rem;
}

.frmx-g-5 {
    --frmx-gutter-x: 3rem;
    --frmx-gutter-y: 3rem;
}

// Apply gutter to row and columns
.frmx-row[class*="frmx-g-"] {
    margin-right: calc(var(--frmx-gutter-x) / -2);
    margin-left: calc(var(--frmx-gutter-x) / -2);
    margin-top: calc(var(--frmx-gutter-y) * -1);

    >[class*="frmx-col"] {
        padding-right: calc(var(--frmx-gutter-x) / 2);
        padding-left: calc(var(--frmx-gutter-x) / 2);
        margin-top: var(--frmx-gutter-y);
    }
}

// ============================================
// Custom Spacing (mt-70 etc.)
// ============================================

.frmx-mt-70 {
    margin-top: 70px !important;
}

// ============================================
// Position Utilities
// ============================================

.frmx-position-static {
    position: static !important;
}

.frmx-position-relative {
    position: relative !important;
}

.frmx-position-absolute {
    position: absolute !important;
}

.frmx-position-fixed {
    position: fixed !important;
}

.frmx-position-sticky {
    position: sticky !important;
}

.frmx-list-unstyled {
    list-style: none !important;
    padding: 0 !important;
}

.frmx-dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 0.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

.frmx-dropdown-item:focus,.frmx-dropdown-item:hover {
    color: #1e2125;
    background-color: #e9ecef
}

.frmx-dropdown-item.active,.frmx-dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #0d6efd
}

.frmx-dropdown-item.disabled,.frmx-dropdown-item:disabled {
    color: #adb5bd;
    pointer-events: none;
    background-color: transparent
}

.dropdown-menu.show {
    display: block
}