/*#region Page*/
.u-page {
    row-gap: var(--page-row-gap);
    padding-block-start: var(--page-padding-block-start);
    padding-block-end: var(--page-padding-block-end);
}
/*#endregion Page*/

/*#region Spacing*/
/* Gap Inherit */
.u-gap-inherit {
    row-gap: inherit;
    column-gap: inherit;
}
/*#endregion Spacing*/

/*#region Module */
.u-module {
    row-gap: var(--module-row-gap);
    column-gap: var(--module-column-gap);
    width: min(100rem, 100%);
    margin-inline: auto;
    padding-inline: 3vw;
}

    /* Module Icon Wrapper */
    .u-module .u-module-icon-wrapper {
        min-width: max-content;
        padding: var(--module-icon-padding);
    }

    /* Module Icon */
    .u-module .u-module-icon {
        width: var(--module-icon-size);
        height: var(--module-icon-size);
    }


/* Module Body */
.u-module-body {
    row-gap: var(--module-row-gap);
    column-gap: var(--module-column-gap);
}

/* Module Header */
.u-module-header {
    row-gap: var(--module-header-row-gap);
    column-gap: var(--module-header-column-gap);
}

/* Module Hero Title */
.u-module-hero-title {
    font-size: var(--module-hero-title-font-size);
}

/* Module Title */
.u-module-title {
    font-size: var(--module-header-title-font-size);
}

/* Module Description */
.u-module-description {
    font-size: var(--module-header-description-font-size);
    color: var(--color-text-soft);
}
/*#endregion Module*/

/*#region Module Content*/
/* Module Content */
.u-module-content {
    row-gap: var(--module-content-row-gap);
    column-gap: var(--module-content-column-gap);
    padding-block: var(--module-content-padding-block);
    padding-inline: var(--module-content-padding-inline);
}

/* Module Content Header */
.u-module-content-header {
    padding: var(--module-content-header-padding);
    row-gap: var(--module-content-header-row-gap);
    column-gap: var(--module-content-header-column-gap);
}

/* Module Content Title */
.u-module-content-title {
    font-size: var(--module-content-title-font-size);
}

/* Module Content Description */
.u-module-content-description {
    font-size: var(--module-content-description-font-size);
    color: var(--color-text-soft);
}
/*#endregion Module Content*/

/*#region Module Footer*/
/* Module Footer */
.u-module-footer {
    padding: var(--module-footer-padding);
    row-gap: var(--module-footer-row-gap);
    column-gap: var(--module-footer-column-gap);
}

/* Module Footer Main */
.u-module-footer-main {
    row-gap: var(--module-footer-main-row-gap);
    column-gap: var(--module-footer-main-column-gap);
}

/* Module Footer Main Title */
.u-module-footer-main-title {
    font-size: var(--module-footer-main-title-font-size);
}

/* Module Footer Main Description */
.u-module-footer-main-description {
    font-size: var(--module-footer-main-description-font-size);
    color: var(--color-text-soft);
}

/* Module Footer Main Icon Wrapper */
:is(.u-module-footer, .u-module-footer-main ) .u-module-footer-main-icon-wrapper {
    min-width: max-content;
    background-color: var(--color-control-soft);
    padding: var(--module-footer-main-icon-padding);
}

/* Module Footer Main Icon */
:is(.u-module-footer, .u-module-footer-main ) .u-module-footer-main-icon {
    width: var(--module-footer-main-icon-size);
    height: var(--module-footer-main-icon-size);
}

/* Module Footer List */
.u-module-footer-list {
    padding-block: var(--module-footer-list-padding-block);
    padding-inline: var(--module-footer-list-padding-inline);
    row-gap: var(--module-footer-list-row-gap);
    column-gap: var(--module-footer-list-column-gap);
}

/* Module Footer Item */
.u-module-footer-item {
    padding-inline: var(--module-footer-item-padding-inline);
    row-gap: var(--module-footer-item-row-gap);
    column-gap: var(--module-footer-item-column-gap);
}

/* Module Footer Item Title */
.u-module-footer-item-title {
    font-size: var(--module-footer-item-title-font-size);
    font-weight: var(--font-bold);
}

/* Module Footer Item Description */
.u-module-footer-item-description {
    font-size: var(--module-footer-item-description-font-size);
    color: var(--color-text-soft);
}

/* Module Footer Item Icon Wrapper */
.u-module-footer-item .u-module-footer-item-icon-wrapper {
    min-width: max-content;
    padding: var(--module-footer-item-icon-padding);
}

/* Module Footer Item Icon */
.u-module-footer-item .u-module-footer-item-icon {
    width: var(--module-footer-item-icon-size);
    height: var(--module-footer-item-icon-size);
}
/*#endregion Module Footer*/

/*#region Panel */
.u-panel {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
/*#endregion Panel */

/*#region Badge */
/* Badge List */
.u-badge-list {
    padding-block: var(--badge-list-padding-block);
    padding-inline: var(--badge-list-padding-inline);
    row-gap: var(--badge-list-row-gap);
    column-gap: var(--badge-list-column-gap);
}

/* Badge */
.u-badge {
    width: fit-content;
    height: max-content;
    row-gap: var(--badge-row-gap);
    column-gap: var(--badge-column-gap);
    padding-block: var(--badge-padding-block);
    padding-inline: var(--badge-padding-inline);
    font-size: var(--badge-font-size);
    background-color: var(--color-control-soft);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

    /* Badge icon Wrapper */
    .u-badge .u-badge-icon-wrapper {
        min-width: max-content;
        padding: var(--badge-icon-padding);
    }

    /* Badge Icon*/
    .u-badge .u-badge-icon {
        width: var(--badge-icon-size);
        height: var(--badge-icon-size);
    }

    /* Badge as Eyebrow*/
    .u-badge.u-eyebrow {
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Badge as Accent */
    .u-badge.u-badge-accent {
        background-color: var(--color-badge-accent);
        color: var(--color-badge-accent-text);
        border-color: transparent;
    }

    /* Badge as Inline */
    .u-badge.inline {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-auto-flow: column;
        align-items: center;
    }

    /* Badge as Block */
    .u-badge.block {
        display: grid;
        grid-auto-rows: max-content;
        grid-auto-flow: row;
        justify-items: center;
        text-align: center;
    }
/*#endregion Badge */

/*#region Cards */

/* Card List */
.u-card-list {
    padding-block: var(--card-list-padding-block);
    padding-inline: var(--card-list-padding-inline);
    row-gap: var(--card-list-row-gap);
    column-gap: var(--card-list-column-gap);
}

/* Card */
.u-card {
    padding: var(--card-padding);
    row-gap: var(--card-row-gap);
    column-gap: var(--card-column-gap);
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

    /* Card icon Wrapper */
    .u-card .u-card-icon-wrapper {
        min-width: max-content;
        background-color: var(--color-control-soft);
        padding: var(--card-icon-padding);
    }

    /* Card Icon */
    .u-card .u-card-icon {
        width: var(--card-icon-size);
        height: var(--card-icon-size);
        color: var(--color-primary);
    }

    /* Card Footer Icon Wrapper */
    .u-card .u-card-footer-icon-wrapper {
        min-width: max-content;
        padding: var(--card-footer-icon-padding);
    }

    /* Card Footer Icon */
    .u-card .u-card-footer-icon {
        width: var(--card-footer-icon-size);
        height: var(--card-footer-icon-size);
    }

/* Card Header */
.u-card-header {
    row-gap: var(--card-header-row-gap);
    column-gap: var(--card-header-column-gap);
}

/* Card Title */
.u-card-title {
    font-size: var(--card-title-font-size);
    color: var(--color-text);
}

/* Card Description */
.u-card-description {
    font-size: var(--card-description-font-size);
    color: var(--color-text-soft);
}

/* Card Footer */
.u-card-footer {
    row-gap: var(--card-footer-row-gap);
    column-gap: var(--card-footer-column-gap);
    font-size: var(--card-footer-font-size);
}
/*#endregion Cards */

/*#region List */
/* List */
.u-list {
    padding-block: var(--list-padding-block);
    padding-inline: var(--list-padding-inline);
    row-gap: var(--list-row-gap);
    column-gap: var(--list-column-gap);
}

/* Item */
.u-list-item {
    padding: var(--list-item-padding);
    row-gap: var(--list-item-row-gap);
    column-gap: var(--list-item-column-gap);
    background-color: var(--color-control-soft);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Item title */
.u-list-item-title {
    font-size: var(--list-item-title-font-size);
    font-weight: var(--font-bold);
}

/* Item description */
.u-list-item-description {
    font-size: var(--list-item-description-font-size);
    color: var(--color-text-soft);
}

/* Item icon Wrapper */
.u-list-item .u-list-item-icon-wrapper {
    min-width: max-content;
    background-color: var(--color-control-soft);
    padding: var(--list-item-icon-padding);
}

/* Item icon */
.u-list-item .u-list-item-icon {
    width: var(--list-item-icon-size);
    height: var(--list-item-icon-size);
}
/*#endregion List */

/*#region Table */
.u-table-cell {
    padding-block: var(--table-cell-padding-block);
    padding-inline: var(--table-cell-padding-inline);
    font-size: var(--table-cell-font-size);
}

    /* Table td Icon*/
    .u-table-cell .u-table-cell-icon {
        width: var(--table-cell-icon-size);
        height: var(--table-cell-icon-size);
        padding: var(--table-cell-icon-padding);
    }

/* Table Header*/
.u-table-header {
    font-size: var(--table-header-font-size);
}

    /* Table Icon*/
    .u-table-header .u-table-header-icon {
        width: var(--table-header-icon-size);
        height: var(--table-header-icon-size);
        padding: var(--table-header-icon-padding);
    }
/*#endregion Table */

/*#region Form */
.u-form {
    padding-block: var(--form-padding-block);
    padding-inline: var(--form-padding-inline);
    row-gap: var(--form-row-gap);
    column-gap: var(--form-column-gap);
}

/* Field : encapsulate - label, control-wrapper */
div.u-field {
    padding-block: var(--field-padding-block);
    padding-inline: var(--field-padding-inline);
}

/* Field label */
label.u-field-label {
    font-size: var(--field-label-font-size);
    font-weight: var(--font-bold);
    padding-block-end: var(--field-row-gap);
    padding-inline-end: var(--field-column-gap);
}

/* Wrapper: encapsulate - control, icon */
.u-control-wrapper {
    background-color: var(--color-control);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;

    &:focus-within {
        outline-color: var(--color-focus-ring);
    }
}

/* Icon Wrapper */
.u-control-icon-wrapper {
    min-width: max-content;
    padding: var(--control-icon-padding);
    padding-inline-end: var(--control-padding-inline);
}

    /* Icon */
    .u-control-icon-wrapper .u-control-icon {
        width: var(--control-icon-size);
        height: var(--control-icon-size);
    }

/* Control */
:is(input, select, textarea).u-control {
    padding-block: var(--control-padding-block);
    padding-inline: var(--control-padding-inline);
    font-size: var(--control-font-size);
    background-color: transparent;
    color: inherit;
    border: none;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }
}

/* TextArea */
textarea.u-control {
    resize: vertical;
}
/*#endregion Form */

/*#region Form Footer */
/* Form Footer */
.u-form-footer {
    padding-block: var(--form-footer-padding-block);
    padding-inline: var(--form-footer-padding-inline);
    row-gap: var(--form-footer-row-gap);
    column-gap: var(--form-footer-column-gap);
}

/* Form Footer Item */
.u-form-footer-item {
    padding-block: var(--form-footer-item-padding-block);
    padding-inline: var(--form-footer-item-padding-inline);
    row-gap: var(--form-footer-item-row-gap);
    column-gap: var(--form-footer-item-column-gap);
}

/* Form Footer Item Description */
.u-form-footer-item-description {
    font-size: var(--form-footer-item-description-font-size);
    color: var(--color-text-muted);
}

/* Form Footer Item Icon Wrapper */
.u-form-footer-item .u-form-footer-item-icon-wrapper {
    min-width: max-content;
    padding: var(--form-footer-item-icon-padding);
    color: var(--color-text-muted);
}

/* Form Footer Item Icon */
.u-form-footer-item .u-form-footer-item-icon {
    width: var(--form-footer-item-icon-size);
    height: var(--form-footer-item-icon-size);
}
/*#endregion Form Footer */

/*#region Action */
/* Actions */
.u-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--actions-row-gap);
    column-gap: var(--actions-column-gap);
    padding-block: var(--actions-padding-block);
    padding-inline: var(--actions-padding-inline);
}

/* Action*/
.u-action {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    width: max-content;
    height: max-content;
    column-gap: var(--action-column-gap);
    row-gap: var(--action-row-gap);
    padding-block: var(--action-padding-block);
    padding-inline: var(--action-padding-inline);
    font-size: var(--action-font-size);
    font-weight: var(--font-bold);
    border-radius: var(--radius-md);
    transition-property: border-color, background-color, color;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    cursor: pointer;

    &[data-disabled] {
        color: var(--color-text-muted);
        background-color: var(--color-control);
        border-color: var(--color-border);
        cursor: not-allowed;
        pointer-events: none;
    }
}

    /* Action Icon*/
    .u-action .u-action-icon {
        width: var(--action-icon-size);
        height: var(--action-icon-size);
    }

    .u-action[data-disabled] .u-action-icon {
        color: var(--color-text-muted);
    }

/* Action Primary*/
.u-action-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary);
}

    .u-action-primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }

/* Action Secondary*/
.u-action-secondary {
    background-color: var(--color-control-soft);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

    .u-action-secondary:hover {
        background-color: var(--color-control-hover);
        border-color: var(--color-border-strong);
    }

.u-action:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
/*#endregion Action */

/*#region Link */
.u-link {
    row-gap: var(--link-row-gap);
    column-gap: var(--link-column-gap);
    font-size: var(--link-font-size);
    color: var(--color-text);
}

    /* Link Icon*/
    .u-link .u-link-icon {
        width: var(--link-icon-size);
        height: var(--link-icon-size);
    }

/*#endregion Link */

/*#region Layout*/
/* Layout Header */
.u-layout-header {
    padding-block: var(--layout-header-padding-block);
    padding-inline: var(--layout-header-padding-inline);
    row-gap: var(--layout-header-row-gap);
    column-gap: var(--layout-header-column-gap);
}

/* Layout Footer */
.u-layout-footer {
    padding-block: var(--layout-footer-padding-block);
    padding-inline: var(--layout-footer-padding-inline);
    row-gap: var(--layout-footer-row-gap);
    column-gap: var(--layout-footer-column-gap);
}

.u-layout-footer-brand {
    font-size: var(--layout-footer-brand-font-size);
}

.u-layout-footer-text {
    font-size: var(--layout-footer-text-font-size);
}

.u-layout-footer-copy {
    font-size: var(--layout-footer-copy-font-size);
}

.u-layout-footer-logo {
    width: var(--layout-footer-logo-size);
    height: var(--layout-footer-logo-size);
}
/*#endregion Layout*/

/*#region Media*/
/* Background Image */
img.u-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Theme transition wrapper */
.u-img-theme-transition-wrapper {
    & > img {
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    [data-theme="dark"] & > img[data-img-theme-dark] {
        opacity: 1;
    }

    [data-theme="light"] & > img[data-img-theme-light] {
        opacity: 1;
    }
}

/* Module Visual*/
.u-img-wrapper {
    height: 100%;
    position: relative;
    overflow: hidden;

    & > img {
        position: absolute;
        display: block;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    &[data-aspect-ratio="4/3"] {
        aspect-ratio: 4 / 3;
    }

    &[data-aspect-ratio="16/9"] {
        aspect-ratio: 16 / 9;
    }

    &[data-aspect-ratio="21/9"] {
        aspect-ratio: 21 / 9;
    }
}

/* Image switcher*/
.u-img-theme-switch {
    & > img {
        display: none;
    }

    [data-theme="dark"] & > img[data-img-theme-dark] {
        display: block;
    }

    [data-theme="light"] & > img[data-img-theme-light] {
        display: block;
    }
}
/*#endregion Media*/

/*#region Shadow*/
.u-shadow {
    box-shadow: 0 1rem 2.5rem -1rem var(--color-shadow);
}

.u-shadow-floating {
    box-shadow: 0 1rem 2rem -1rem var(--color-shadow-floating);
}
/*#endregion Shadow*/