/* ==================================================================== */
/* LAYOUT: CONTAINERS                                                  */
/* ==================================================================== */

.hds-container {
    width: 100%;
    max-width: var(--hds-size-layout-container-max-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hds-space-container-padding-x);
    padding-right: var(--hds-space-container-padding-x);
}

.hds-container-narrow {
    max-width: var(--hds-size-layout-container-max);
}

.hds-section {
    padding-top: var(--hds-space-container-padding-y);
    padding-bottom: var(--hds-space-container-padding-y);
}

/* ==================================================================== */
/* LAYOUT: BARS                                                        */
/* ==================================================================== */

.hds-back-bar {
    width: 100%;
    background: var(--hds-color-gray-0);
    box-sizing: border-box;
}

.hds-back-bar__content {
    width: 100%;
    max-width: var(--hds-size-layout-container-max-wide);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* ==================================================================== */
/* SPACING UTILITIES                                                    */
/* ==================================================================== */

/* Gap */
.hds-gap-2 { gap: var(--hds-space-2); }
.hds-gap-4 { gap: var(--hds-space-4); }
.hds-gap-6 { gap: var(--hds-space-6); }
.hds-gap-8 { gap: var(--hds-space-8); }
.hds-gap-10 { gap: var(--hds-space-10); }
.hds-gap-12 { gap: var(--hds-space-12); }
.hds-gap-16 { gap: var(--hds-space-16); }
.hds-gap-24 { gap: var(--hds-space-24); }
.hds-gap-32 { gap: var(--hds-space-32); }
.hds-gap-48 { gap: var(--hds-space-48); }

/* Padding - all sides */
.hds-p-8 { padding: var(--hds-space-8); }
.hds-p-12 { padding: var(--hds-space-12); }
.hds-p-16 { padding: var(--hds-space-16); }
.hds-p-24 { padding: var(--hds-space-24); }
.hds-p-32 { padding: var(--hds-space-32); }
.hds-p-48 { padding: var(--hds-space-48); }

/* Padding - vertical */
.hds-py-8 { padding-top: var(--hds-space-8); padding-bottom: var(--hds-space-8); }
.hds-py-12 { padding-top: var(--hds-space-12); padding-bottom: var(--hds-space-12); }
.hds-py-16 { padding-top: var(--hds-space-16); padding-bottom: var(--hds-space-16); }
.hds-py-24 { padding-top: var(--hds-space-24); padding-bottom: var(--hds-space-24); }
.hds-py-32 { padding-top: var(--hds-space-32); padding-bottom: var(--hds-space-32); }
.hds-py-48 { padding-top: var(--hds-space-48); padding-bottom: var(--hds-space-48); }

/* Padding - horizontal */
.hds-px-12 { padding-left: var(--hds-space-12); padding-right: var(--hds-space-12); }
.hds-px-16 { padding-left: var(--hds-space-16); padding-right: var(--hds-space-16); }
.hds-px-24 { padding-left: var(--hds-space-24); padding-right: var(--hds-space-24); }
.hds-px-32 { padding-left: var(--hds-space-32); padding-right: var(--hds-space-32); }

/* Margin - top */
.hds-mt-4 { margin-top: var(--hds-space-4); }
.hds-mt-8 { margin-top: var(--hds-space-8); }
.hds-mt-12 { margin-top: var(--hds-space-12); }
.hds-mt-16 { margin-top: var(--hds-space-16); }
.hds-mt-24 { margin-top: var(--hds-space-24); }
.hds-mt-32 { margin-top: var(--hds-space-32); }

/* Margin - bottom */
.hds-mb-4 { margin-bottom: var(--hds-space-4); }
.hds-mb-8 { margin-bottom: var(--hds-space-8); }
.hds-mb-12 { margin-bottom: var(--hds-space-12); }
.hds-mb-16 { margin-bottom: var(--hds-space-16); }
.hds-mb-24 { margin-bottom: var(--hds-space-24); }
.hds-mb-32 { margin-bottom: var(--hds-space-32); }

/* Margin - horizontal */
.hds-mx-auto { margin-left: auto; margin-right: auto; }


/* ==================================================================== */
/* TYPOGRAPHY UTILITIES                                                 */
/* ==================================================================== */

.hds-text-body {
    font-family: var(--hds-type-body-font-family);
    font-size: var(--hds-type-body-font-size);
    font-weight: var(--hds-type-body-font-weight);
    line-height: var(--hds-type-body-line-height);
    letter-spacing: var(--hds-type-body-letter-spacing);
    color: var(--hds-color-text-primary);
}

.hds-text-body-small {
    font-family: var(--hds-type-body-small-font-family);
    font-size: var(--hds-type-body-small-font-size);
    font-weight: var(--hds-type-body-small-font-weight);
    line-height: var(--hds-type-body-small-line-height);
    letter-spacing: var(--hds-type-body-small-letter-spacing);
    color: var(--hds-color-text-primary);
}

.hds-text-body-xs {
    font-family: var(--hds-type-body-xs-font-family);
    font-size: var(--hds-type-body-xs-font-size);
    font-weight: var(--hds-type-body-xs-font-weight);
    line-height: var(--hds-type-body-xs-line-height);
    letter-spacing: var(--hds-type-body-xs-letter-spacing);
    color: var(--hds-color-text-primary);
}

.hds-text-heading-xs {
    font-family: var(--hds-type-heading-xs-font-family);
    font-size: var(--hds-type-heading-xs-font-size);
    font-weight: var(--hds-type-heading-xs-font-weight);
    line-height: var(--hds-type-heading-xs-line-height);
    letter-spacing: var(--hds-type-heading-xs-letter-spacing);
    color: var(--hds-color-text-heading);
}

.hds-text-heading-sm {
    font-family: var(--hds-type-heading-sm-font-family);
    font-size: var(--hds-type-heading-sm-font-size);
    font-weight: var(--hds-type-heading-sm-font-weight);
    line-height: var(--hds-type-heading-sm-line-height);
    letter-spacing: var(--hds-type-heading-sm-letter-spacing);
    color: var(--hds-color-text-heading);
}

.hds-text-heading-md {
    font-family: var(--hds-type-heading-md-font-family);
    font-size: var(--hds-type-heading-md-font-size);
    font-weight: var(--hds-type-heading-md-font-weight);
    line-height: var(--hds-type-heading-md-line-height);
    letter-spacing: var(--hds-type-heading-md-letter-spacing);
    color: var(--hds-color-text-heading);
}

.hds-text-heading-lg {
    font-family: var(--hds-type-heading-lg-font-family);
    font-size: var(--hds-type-heading-lg-font-size);
    font-weight: var(--hds-type-heading-lg-font-weight);
    line-height: var(--hds-type-heading-lg-line-height);
    letter-spacing: var(--hds-type-heading-lg-letter-spacing);
    color: var(--hds-color-text-heading);
}

.hds-text-heading-responsive {
    font-family: var(--hds-type-heading-section-font-family);
    font-size: var(--hds-type-heading-section-font-size);
    font-weight: var(--hds-type-heading-section-font-weight);
    line-height: var(--hds-type-heading-section-line-height);
    letter-spacing: var(--hds-type-heading-section-letter-spacing);
    color: var(--hds-color-text-heading);
}

.hds-text-caption {
    font-family: var(--hds-type-caption-font-family);
    font-size: var(--hds-type-caption-font-size);
    font-weight: var(--hds-type-caption-font-weight);
    line-height: var(--hds-type-caption-line-height);
    letter-spacing: var(--hds-type-caption-letter-spacing);
    color: var(--hds-color-text-weak);
}

.hds-text-body-responsive {
    font-family: var(--hds-type-body-section-font-family);
    font-size: var(--hds-type-body-section-font-size);
    font-weight: var(--hds-type-body-section-font-weight);
    line-height: var(--hds-type-body-section-line-height);
    letter-spacing: var(--hds-type-body-section-letter-spacing);
    color: var(--hds-color-text-primary);
}

.hds-text-secondary { color: var(--hds-color-text-secondary); }
.hds-text-muted { color: var(--hds-color-text-muted); }


/* ==================================================================== */
/* LAYOUT UTILITIES - FLEX                                              */
/* ==================================================================== */

.hds-flex-row {
    display: flex;
    flex-direction: row;
}

.hds-flex-column {
    display: flex;
    flex-direction: column;
}

.hds-items-start { align-items: flex-start; }
.hds-items-center { align-items: center; }
.hds-items-end { align-items: flex-end; }
.hds-items-stretch { align-items: stretch; }

.hds-justify-start { justify-content: flex-start; }
.hds-justify-center { justify-content: center; }
.hds-justify-end { justify-content: flex-end; }
.hds-justify-between { justify-content: space-between; }
.hds-justify-around { justify-content: space-around; }

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

.hds-flex-1 { flex: 1; }
.hds-flex-shrink-0 { flex-shrink: 0; }


/* ==================================================================== */
/* CARD UTILITIES                                                       */
/* ==================================================================== */

.hds-card {
    background: var(--hds-card-bg, var(--hds-color-surface-default));
    border-radius: var(--hds-card-radius, var(--hds-radius-card-small));
    padding: var(--hds-card-padding, var(--hds-space-content-padding));
    box-shadow: var(--hds-card-shadow, var(--hds-shadow-overlay));
}

.hds-card-l-shape {
    background: var(--hds-card-bg, var(--hds-color-surface-tinted-blue));
    border-radius: var(--hds-card-radius, var(--hds-radius-card-l-shape));
    padding: var(--hds-card-padding, var(--hds-space-content-padding));
    box-shadow: var(--hds-card-shadow, var(--hds-shadow-overlay));
}


/* ==================================================================== */
/* LINK UTILITIES                                                       */
/* ==================================================================== */

.hds-link {
    color: var(--hds-color-link);
    text-decoration: none;
    transition: color var(--hds-transition-default-duration) var(--hds-transition-default-timing);
}

.hds-link:hover,
.hds-link:focus {
    color: var(--hds-color-link-hover);
    text-decoration: none;
}

/* ==================================================================== */
/* PLATFORM OVERRIDES                         */
/* ==================================================================== */

.toast-container.top {
    top: 8rem !important;
}