/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

.sv_fonts {
    width: 100%;
    min-width: 0;
}

.sv_fonts_list {
    width: 100%;
    min-width: 0;
}

.sv_fonts_intro,
.sv_fonts_note {
    margin: 0;
    line-height: var(--line_height_normal);
}

.sv_fonts_intro {
    padding-bottom: var(--space_5);
}

.sv_fonts_note {
    padding-top: var(--space_5);
}


/* --------------------------------------------------------------------------
   Font item
   -------------------------------------------------------------------------- */

.sv_font {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space_5);
    width: 100%;
    min-width: 0;
    padding-block: var(--space_2);
    border-bottom: var(--space_0_25) solid var(--color_AshGrayDark);
}

    .sv_font:nth-of-type(odd) {
        flex-direction: row-reverse;
    }

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


/* --------------------------------------------------------------------------
   Font sample
   -------------------------------------------------------------------------- */

.sv_font_sample {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    font-weight: var(--font_weight_regular);
    line-height: var(--line_height_tight);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Description and download
   -------------------------------------------------------------------------- */

.sv_font_content {
    flex: 1 1 auto;
    min-width: 0;
}

.sv_font_description {
    margin: 0;
    line-height: var(--line_height_normal);
}

.sv_font_download {
    display: inline;
    margin-left: var(--space_2);
    color: inherit;
    font-family: var(--font_BovinoMedium);
    font-weight: var(--font_weight_regular);
    text-decoration: none;
    white-space: nowrap;
    transition: color 250ms ease, font-weight 250ms ease;
}

    .sv_font_download:hover {
        font-weight: var(--font_weight_bold);
    }

    .sv_font_download:focus-visible {
        outline: var(--space_0_5) solid currentColor;
        outline-offset: var(--space_0_5);
    }

/* --------------------------------------------------------------------------
   Layered font samples
   -------------------------------------------------------------------------- */

.sv_font_sample_stack {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

.sv_font_sample_layer {
    position: absolute;
    top: var(--space_2);
    left: 0;
    display: flex;
    align-items: flex-start;
    white-space: nowrap;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   BeeBopp
   -------------------------------------------------------------------------- */

.sv_font_sample_beebopp {
    align-items: center;
    font-family: var(--font_BeeBopp);
    font-size: var(--font_size_24);
    color: var(--color_Blue) !important;
}


/* --------------------------------------------------------------------------
   Times New Roman
   -------------------------------------------------------------------------- */

.sv_font_sample_times_new_roman {
    align-items: flex-start;
    font-family: "Times New Roman", Times, serif;
    font-size: var(--font_size_40);
    font-weight: var(--font_weight_black);
    letter-spacing: .3125em;
    color: var(--color_Black);
}


/* --------------------------------------------------------------------------
   Isadora
   -------------------------------------------------------------------------- */

.sv_font_sample_isadora {
    align-items: flex-start;
    font-family: var(--font_Isadora);
    font-size: var(--font_size_40);
    color: var(--color_Red) !important;
}

/* --------------------------------------------------------------------------
   AI Fragment
   -------------------------------------------------------------------------- */

.sv_font_sample_ai_fragment {
    align-items: flex-start;
    font-family: var(--font_AiFragment);
    font-size: var(--font_size_28);
    color: var(--color_Red) !important;
}

/* --------------------------------------------------------------------------
   Bank Gothic
   -------------------------------------------------------------------------- */

.sv_font_sample_bank_gothic {
    align-items: flex-start;
    font-family: var(--font_BankGothic);
    font-size: var(--font_size_48);
    color: var(--color_Brown) !important;
}

/* --------------------------------------------------------------------------
   P22 Typewriter
   -------------------------------------------------------------------------- */

.sv_font_sample_p22_typewriter {
    align-items: flex-start;
    font-family: var(--font_P22TypeWriter);
    font-size: var(--font_size_48);
    color: var(--color_Black);
}

/* --------------------------------------------------------------------------
   RockIt
   -------------------------------------------------------------------------- */

.sv_font_sample_rockit {
    align-items: center;
    font-family: var(--font_Rockit);
    font-size: var(--font_size_20);
    color: var(--color_LightCyan) !important;
    transform: translateY(var(--space_5));
}

/* --------------------------------------------------------------------------
   A Bite
   -------------------------------------------------------------------------- */

.sv_font_sample_abite {
    align-items: flex-start;
    font-family: var(--font_ABite);
    font-size: var(--font_size_36);
    color: var(--color_Red) !important;
}

/* --------------------------------------------------------------------------
   Prezrti
   -------------------------------------------------------------------------- */

.sv_font_sample_prezrti {
    align-items: flex-start;
    font-family: var(--font_Prezrti);
    font-size: var(--font_size_56);
    color: var(--color_Black);
}

/* --------------------------------------------------------------------------
   Prezrti Chromatic
   -------------------------------------------------------------------------- */

.sv_font_sample_prezrti_chromatic {
    position: relative;
    z-index: 10;
    align-items: flex-start;
    font-family: var(--font_PrezrtiCromatic);
    font-size: var(--font_size_40);
    color: var(--color_Red) !important;
    transform: translateY(calc(var(--space_1) * 1.3));
}

.sv_font_sample_prezrti_chromatic_layer {
    z-index: 9;
    font-family: var(--font_PrezrtiCromatic);
    font-size: var(--font_size_40);
    color: var(--color_Black);
}

/* --------------------------------------------------------------------------
   Typewriter Split
   -------------------------------------------------------------------------- */

.sv_font_sample_typewriter_split {
    position: relative;
    z-index: 10;
    align-items: flex-start;
    font-family: var(--font_TypeWriterSplit);
    font-size: var(--font_size_44);
    color: var(--color_Red) !important;
    transform: translateY(var(--space_1_5));

}

.sv_font_sample_typewriter_split_layer {
    z-index: 9;
    font-family: var(--font_TypeWriterSplit);
    font-size: var(--font_size_44);
    color: var(--color_Black);
}

/* --------------------------------------------------------------------------
   Bovino
   -------------------------------------------------------------------------- */

.sv_font_sample_bovino_medium {
    align-items: center;
    font-family: var(--font_BovinoMedium);
    font-size: var(--font_size_32);
    color: var(--color_Black);
}


/* --------------------------------------------------------------------------
   I Love Glitter
   -------------------------------------------------------------------------- */

.sv_font_sample_i_love_glitter {
    align-items: center;
    font-family: var(--font_ILoveGliter);
    font-size: var(--font_size_48);
    color: var(--color_Black);
}


/* --------------------------------------------------------------------------
   A Dripping Marker
   -------------------------------------------------------------------------- */

.sv_font_sample_ad_ripping {
    align-items: center;
    font-family: var(--font_Adripping);
    font-size: var(--font_size_44);
    color: var(--color_LightNavyBlue) !important;
}

/* --------------------------------------------------------------------------
   Old Newspaper
   -------------------------------------------------------------------------- */

.sv_font_sample_old_newspaper {
    align-items: flex-start;
    font-family: var(--font_OldNewspaper);
    font-size: var(--font_size_44);
    color: var(--color_text_muted) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 64em) {
    .sv_font,
    .sv_font:nth-of-type(odd) {
        flex-direction: column;
        gap: var(--space_2);
    }

    .sv_font_sample,
    .sv_font_sample_stack,
    .sv_font_content {
        max-width: 100%;
    }

    .sv_font_content {
        width: 100%;
    }
}

@media only screen and (max-width: 48em) {
    .sv_font_sample,
    .sv_font_sample_layer {
        white-space: normal;
    }
}