@import './colors.css';


/* Large screens */
@media (min-width: 1440px) {
    :root {
        --font-size-display-large: 84px;
        --font-size-display-medium: 72px;
        --font-size-display-small: 56px;
        --font-size-title-h1: 44px;
        --font-size-title-h2: 40px;
        --font-size-title-h3: 32px;
        --font-size-title-h4: 28px;
        --font-size-title-h5: 24px;
        --font-size-title-h6: 20px;
        --font-size-body-large: 20px;
        --font-size-body-medium: 16px;
        --font-size-body-small: 12px;
        --font-size-label-large: 16px;
        --font-size-label-medium: 14px;
        --font-size-label-small: 12px;
        --font-size-caption-large: 12px;
        --font-size-caption-medium: 10px;
    }
}

/* Medium screens */
@media (max-width: 1439px) and (min-width: 720px) {
    :root {
        --font-size-display-large: 84px;
        --font-size-display-medium: 72px;
        --font-size-display-small: 56px;
        --font-size-title-h1: 44px;
        --font-size-title-h2: 40px;
        --font-size-title-h3: 32px;
        --font-size-title-h4: 28px;
        --font-size-title-h5: 24px;
        --font-size-title-h6: 20px;
        --font-size-body-large: 20px;
        --font-size-body-medium: 16px;
        --font-size-body-small: 12px;
        --font-size-label-large: 16px;
        --font-size-label-medium: 14px;
        --font-size-label-small: 12px;
        --font-size-caption-large: 12px;
        --font-size-caption-medium: 10px;
    }
}

/* Small screens */
@media (max-width: 720px) {
    :root {
        --font-size-display-large: 84px;
        --font-size-display-medium: 72px;
        --font-size-display-small: 56px;
        --font-size-title-h1: 44px;
        --font-size-title-h2: 40px;
        --font-size-title-h3: 32px;
        --font-size-title-h4: 28px;
        --font-size-title-h5: 24px;
        --font-size-title-h6: 20px;
        --font-size-body-large: 20px;
        --font-size-body-medium: 12px;
        --font-size-body-small: 12px;
        --font-size-label-large: 16px;
        --font-size-label-medium: 14px;
        --font-size-label-small: 12px;
        --font-size-caption-large: 12px;
        --font-size-caption-medium: 10px;
    }
}


/* Display */
.display-l-bold {
    font-size: var(--font-size-display-large);
    font-weight: 700;
}

.display-l-semibold {
    font-size: var(--font-size-display-large);
    font-weight: 600;
}

.display-l-medium {
    font-size: var(--font-size-display-large);
    font-weight: 500;
}

.display-l-regular {
    font-size: var(--font-size-display-large);
    font-weight: 400;
}

.display-m-bold {
    font-size: var(--font-size-display-medium);
    font-weight: 700;
}

.display-m-semibold {
    font-size: var(--font-size-display-medium);
    font-weight: 600;
}

.display-m-medium {
    font-size: var(--font-size-display-medium);
    font-weight: 500;
}

.display-m-regular {
    font-size: var(--font-size-display-medium);
    font-weight: 400;
}

.display-s-bold {
    font-size: var(--font-size-display-small);
    font-weight: 700;
}

.display-s-semibold {
    font-size: var(--font-size-display-small);
    font-weight: 600;
}

.display-s-medium {
    font-size: var(--font-size-display-small);
    font-weight: 500;
}

.display-s-regular {
    font-size: var(--font-size-display-small);
    font-weight: 400;
}

/* Titles */
.title-h1-bold {
    font-size: var(--font-size-title-h1);
    font-weight: 700;
}

.title-h1-semibold {
    font-size: var(--font-size-title-h1);
    font-weight: 600;
}

.title-h1-medium {
    font-size: var(--font-size-title-h1);
    font-weight: 500;
}

.title-h1-regular {
    font-size: var(--font-size-title-h1);
    font-weight: 400;
}

.title-h2-bold {
    font-size: var(--font-size-title-h2);
    font-weight: 700;
}

.title-h2-semibold {
    font-size: var(--font-size-title-h2);
    font-weight: 600;
}

.title-h2-medium {
    font-size: var(--font-size-title-h2);
    font-weight: 500;
}

.title-h2-regular {
    font-size: var(--font-size-title-h2);
    font-weight: 400;
}

.title-h3-bold {
    font-size: var(--font-size-title-h3);
    font-weight: 700;
}

.title-h3-semibold {
    font-size: var(--font-size-title-h3);
    font-weight: 600;
}

.title-h3-medium {
    font-size: var(--font-size-title-h3);
    font-weight: 500;
}

.title-h3-regular {
    font-size: var(--font-size-title-h3);
    font-weight: 400;
}

.title-h4-bold {
    font-size: var(--font-size-title-h4);
    font-weight: 700;
}

.title-h4-semibold {
    font-size: var(--font-size-title-h4);
    font-weight: 600;
}

.title-h4-medium {
    font-size: var(--font-size-title-h4);
    font-weight: 500;
}

.title-h4-regular {
    font-size: var(--font-size-title-h4);
    font-weight: 400;
}

.title-h5-bold {
    font-size: var(--font-size-title-h5);
    font-weight: 700;
}

.title-h5-semibold {
    font-size: var(--font-size-title-h5);
    font-weight: 600;
}

.title-h5-medium {
    font-size: var(--font-size-title-h5);
    font-weight: 500;
}

.title-h5-regular {
    font-size: var(--font-size-title-h5);
    font-weight: 400;
}

.title-h6-bold {
    font-size: var(--font-size-title-h6);
    font-weight: 700;
}

.title-h6-semibold {
    font-size: var(--font-size-title-h6);
    font-weight: 600;
}

.title-h6-medium {
    font-size: var(--font-size-title-h6);
    font-weight: 500;
}

.title-h6-regular {
    font-size: var(--font-size-title-h6);
    font-weight: 400;
}

/* Body */
.body-l-bold {
    font-size: var(--font-size-body-large);
    font-weight: 700;
}

.body-l-semibold {
    font-size: var(--font-size-body-large);
    font-weight: 600;
}

.body-l-medium {
    font-size: var(--font-size-body-large);
    font-weight: 500;
}

.body-l-regular {
    font-size: var(--font-size-body-large);
    font-weight: 400;
}

.body-m-bold {
    font-size: var(--font-size-body-medium);
    font-weight: 700;
}

.body-m-semibold {
    font-size: var(--font-size-body-medium);
    font-weight: 600;
}

.body-m-medium {
    font-size: var(--font-size-body-medium);
    font-weight: 500;
}

.body-m-regular {
    font-size: var(--font-size-body-medium);
    font-weight: 400;
}

.body-s-bold {
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.body-s-semibold {
    font-size: var(--font-size-body-small);
    font-weight: 600;
}

.body-s-medium {
    font-size: var(--font-size-body-small);
    font-weight: 500;
}

.body-s-regular {
    font-size: var(--font-size-body-small);
    font-weight: 400;
}

/* Labels */
.label-l-bold {
    font-size: var(--font-size-label-large);
    font-weight: 700;
}

.label-l-semibold {
    font-size: var(--font-size-label-large);
    font-weight: 600;
}

.label-l-medium {
    font-size: var(--font-size-label-large);
    font-weight: 500;
}

.label-l-regular {
    font-size: var(--font-size-label-large);
    font-weight: 400;
}

.label-m-bold {
    font-size: var(--font-size-label-medium);
    font-weight: 700;
}

.label-m-semibold {
    font-size: var(--font-size-label-medium);
    font-weight: 600;
}

.label-m-medium {
    font-size: var(--font-size-label-medium);
    font-weight: 500;
}

.label-m-regular {
    font-size: var(--font-size-label-medium);
    font-weight: 400;
}

.label-s-bold {
    font-size: var(--font-size-label-small);
    font-weight: 700;
}

.label-s-semibold {
    font-size: var(--font-size-label-small);
    font-weight: 600;
}

.label-s-medium {
    font-size: var(--font-size-label-small);
    font-weight: 500;
}

.label-s-regular {
    font-size: var(--font-size-label-small);
    font-weight: 400;
}

/* Captions */
.caption-l-bold {
    font-size: var(--font-size-caption-large);
    font-weight: 700;
}

.caption-l-semibold {
    font-size: var(--font-size-caption-large);
    font-weight: 600;
}

.caption-l-medium {
    font-size: var(--font-size-caption-large);
    font-weight: 500;
}

.caption-l-regular {
    font-size: var(--font-size-caption-large);
    font-weight: 400;
}

.caption-m-bold {
    font-size: var(--font-size-caption-medium);
    font-weight: 700;
}

.caption-m-semibold {
    font-size: var(--font-size-caption-medium);
    font-weight: 600;
}

.caption-m-medium {
    font-size: var(--font-size-caption-medium);
    font-weight: 500;
}

.caption-m-regular {
    font-size: var(--font-size-caption-medium);
    font-weight: 400;
}


.mud-list-item-icon {
    min-width: 0px !important;
    width: auto;
    margin-right: 10px;
}

/* General */
.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

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