commerce/src/styles/_utilities.scss

@layer utilities {
    .heading-1 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.01em;
        font-weight: bold;
        text-transform: uppercase;
        @screen md {
            font-size: 64px;
            line-height: 80px;
            letter-spacing: -0.03em;
        }
    }
    .heading-2 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.02em;
        font-weight: bold;
        text-transform: uppercase;
        @screen md {
            font-size: 48px;
            line-height: 56px;
            letter-spacing: -0.02em;
        }
    }
    .heading-3 {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.01em;
        font-weight: bold;
        text-transform: uppercase;
        @screen md {
            font-size: 32px;
            line-height: 40px;
            letter-spacing: -0.01em;
        }
    }

    .sm-headline {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: -0.01em;
        font-weight: bold;
        @screen md {
            font-size: 20px;
            line-height: 28px;
            letter-spacing: -0.01em;
        }
    }

    .sub-headline {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: -0.01em;
        @screen md {
            font-size: 24px;
            line-height: 32px;
            letter-spacing: -0.01em;
        }
    }

    .topline {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0.01em;
        @screen md {
            font-size: 20px;
            line-height: 28px;
            letter-spacing: 0.01em;
        }
    }

    .caption {
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0.01em;
    }

    .sm-label {
        font-size: 10px;
        line-height: 16px;
    }

    .spacing-horizontal {
        padding-left: 2rem;
        padding-right: 2rem;
        @screen md {
            padding-left: 6.4rem;
            padding-right: 6.4rem;
        }
        @screen lg {
            padding-left: 11.2rem;
            padding-right: 11.2rem;
        }
    }
    .spacing-horizontal-left {
        padding-left: 2rem;
        @screen md {
            padding-left: 6.4rem;
            padding-right: 6.4rem;
        }
        @screen lg {
            padding-left: 11.2rem;
            padding-right: 11.2rem;
        }
    }
    .custom-border-radius {
        border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
    }

    .custom-border-radius-lg {
        border-radius: 60% 2% 2% 2%/ 6% 50% 50% 50%;
    }

    .shape-common {
        position: relative;
        $border: 2px;
        margin: $border;
        clip-path: url(#svg-custom-shape);
    }

    .shape-common-border {
        position: relative;
        $border: 2px;
        margin: $border;

        .inner {
            background: var(--white);
            clip-path: url(#svg-custom-shape);
        }
        &::before {
            position: absolute;
            content: "";
            width: calc(100% + #{$border} * 2);
            height: calc(100% + #{$border} * 2);
            background-color: var(--primary);
            top: calc(#{$border} * -1);
            left: calc(#{$border} * -1);
            clip-path: url(#svg-custom-shape);
        }
    }

    .shape-common-lg {
        clip-path: url(#svg-custom-shape-lg);
        padding: 2rem;
    }

    .shape-common-lg-border {
        position: relative;
        $border: 2px;
        margin: $border;

        .inner {
            padding: 2rem;
            clip-path: url(#svg-custom-shape-lg);
        }
        &::before {
            position: absolute;
            content: "";
            width: calc(100% + #{$border} * 2);
            height: calc(100% + #{$border} * 2);
            background-color: var(--primary);
            top: calc(#{$border} * -1);
            left: calc(#{$border} * -1);
            clip-path: url(#svg-custom-shape-lg);
        }
    }

    .font-heading {
        font-family: var(--font-heading);
    }

    .font-logo {
        font-family: var(--font-logo);
    }

    .custom-scroll {
        overflow-y: auto;
        &::-webkit-scrollbar-track {
            background-color: var(--background-gray);
            border-radius: 10px;
        }

        &::-webkit-scrollbar {
            border-radius: 10px;
            width: 6px;
            background-color: var(--background-gray);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: var(--primary);
        }
    }

    .u-form {
        .body {
            > div {
                &:not(:last-child) {
                    margin-bottom: 1.6rem;
                }
            }
            .line {
                @apply flex justify-between items-center;
                > div {
                    flex: 1;
                    &:not(:last-child) {
                        margin-right: 1.6rem;
                    }
                }
            }
        }
    }

    .u-icon {
        width: 2rem;
        height: 2rem;
    }
}