@import (reference) "mediakit.less";

@read_size: 16px;

@read_color: rgba(@main_black);

@shadow_frag: 0 0 1px rgba(@main_black);
@main_text_shadow: @shadow_frag, @shadow_frag, @shadow_frag, @shadow_frag;

.bold_focus_text {
    font-family: @focus_font;
    font-weight: bold;
}
.bold_read_text {
    font-family: @read_font;
    font-weight: bold;
}
.vlh_button {
    font-family: @read_font;
}

.graph_axis_ticks {

}
.graph_axis_labels {

}

/* A */
html {
    font-family: @read_font;
    // Fluid typography
    // Reverse, larger for phones, normal for desktop
    // 480-730 breakpoints
    --font-size-xs: clamp(8px, calc(-1.6vw + 20px), 12px);
    --font-size-sm: clamp(12px, calc(-1.6vw + 24px), 16px);
    --font-size-md: clamp(16px, calc(-1.6vw + 28px), 20px); 
    --font-size-lg: clamp(20px, calc(-1.6vw + 32px), 24px);
    --font-size-xl: clamp(24px, calc(-1.6vw + 36px), 28px);
    --font-size-2xl: clamp(28px, calc(-1.6vw + 40px), 32px);
}
body {
    color: @read_color;
}
a {
    &:link, 
    &:visited {
        color: inherit;
        text-decoration: none;
    }
    &:hover, 
    &:focus {
        color: rgba(@secondary_black);
        text-decoration: underline;
    }
}
abbr {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
abbr[data-title]:hover::after, 
abbr[data-title]:focus::after {
    font-size: 12px;
}

/* B */
#full_logo {
    font-family: @logo_font;
    font-size: 48px;
    color: rgba(@main_yellow, 0.9)
}
#subheader {
    font-family: @read_font;
    font-size: 16px;
    color: rgba(@main_white);
}
#search_bar {
    font-family: @read_font;
}
/* Source: https://danklammer.com/articles/simple-css-toggle-switch/ */
.vct_toggle:before {
    &:extend(.vct_toggle:after);
    text-indent: 60px;
}
.vct_toggle:checked:before {
    text-indent: -55px;
}
.vct_toggle:after {
    &:extend(.bold_read_text);
    font-size: 10px;
    color: rgba(@main_white);
    line-height: 28px;
    text-transform: uppercase;
    text-shadow: @main_text_shadow;
}
#sign_off {
    &:extend(.vlh_button);
    color: rgba(@main_white);
}

/* C */
.nav_item, 
.nav_sub_item {
    color: rgba(@main_white);
    text-align: center;
    text-shadow: @main_text_shadow;
}
.nav_item {
    font-size: 20px;
}
.nav_sub_item {
    font-size: 16px;
}
#stat_count {
    font-size: 10px;
}

/* E */
#login_block {
    font-size: var(--font-size-md);
}
#login_error {
    color: rgba(@main_red, 0.8);
}
#user_input > input {
    font-family: @read_font;
}
#reset {
    font-weight: bold;
    // font-size: 14px;
    // font-size: var(--font-size-md);
}

/* F */
.dir_card_title_line {
    // font-size: 24px;
    font-size: var(--font-size-xl);
    color: rgba(@main_white);
    text-align: center;
    text-shadow: @main_text_shadow;
}
.dir_card_content {
    text-align: center;
}    
.dir_card_content > div {
    font-weight: bolder;
    // font-size: 16px;
    font-size: var(--font-size-md);
}

/* G */
.welcome_login {
    font-family: 'Permanent Marker';
    font-weight: lighter;
    font-size: 24px;
    text-align: center;
}
#directory_help {
    font-size: 18px;
}
#directory_img {
    font-size: 12px;
}
#wiv {
    font-family: unset !important;
}
.wiv_tab {
    color: rgba(@main_yellow, 0.9) !important;
    text-shadow: @main_text_shadow;
}    
.wiv_tab, 
.about_tab {
    font-weight: bolder !important;
    font-size: 150% !important;
}
.about_tab {
    text-shadow: @main_text_shadow;
}
.about_define {
    font-family: @read_font !important;
    font-size: 16px;
}

/* I */
#form_meta {
    font-size: 12px;
}
.form_identifier {
    text-decoration: underline;
}
#file_number {
    text-align: right;
}
.ec_button {
    text-align: center;
}
.form_header,
.box_header {
    // font-size: 16px;
    font-size: var(--font-size-md);
}
abbr > sup {
    // font-size: 12px;
    font-size: var(--font-size-sm);
}
abbr.raw_reveal {
    text-underline-offset: 0px;
}
.box_data, 
.warning, 
.help_all_map, 
.help_all_agent {
    // font-size: 28px;
    font-size: var(--font-size-2xl);
}
.warning, 
.help_all_map, 
.help_all_agent {
    &:extend(.bold_focus_text);
    color: rgba(@main_red);
    text-align: center;
}    
#box_report_date {
    text-transform: uppercase;
}
.number, 
.soo {
    &:extend(.bold_focus_text);
}
.na_number {
    color: rgba(@main_gray, 0.3);
}
.grade {
    font-family: @read_font;
    font-weight: lighter !important;
    // font-size: 20px;
    font-size: var(--font-size-lg);
}
#instructions,
#instructions > span.grade {
    // font-size: 16px;
    font-size: var(--font-size-md);
}
.number_row {
    // font-size: 24px;
    font-size: var(--font-size-xl);
}
.dis_cont, 
.box_footer {
    text-align: center;
}
.box_footer {
    color: rgba(@main_gray, 0.5);
}
.map_line {
    &:extend(.bold_focus_text);
}
.map_line,
.roster_line {
    // font-size: 12px;
    font-size: var(--font-size-md);    
}
.ago_line {
    font-weight: normal;
}
.single_agent {
    // font-size: 16px;
    font-size: var(--font-size-md);
}
.agent_description > div,
.matchup_description,
.matchup_legend {
    font-weight: lighter;
    // font-size: 14px;
    font-size: var(--font-size-sm);
    text-align: right;
}
.agent_name {
    font-weight: bold;
    // font-size: 24px;
    font-size: var(--font-size-xl);
    text-transform: capitalize;
}
.inactive_tab,
.active_tab {
    // font-size: 16px;
    font-size: var(--font-size-md);
}
#svg_map_graph > text {
    font-size: 12px;
}
#pm_line_text, 
#map_round_count {
    font-size: 12px;
}
#a_line_text {
    font-size: 12px;
}
.mu_type, 
.caveat,
.mu_team {
    font-weight: bold;
    // font-size: 12px;
    font-size: var(--font-size-sm);
}
.single_mu,
.mu_player {
    // font-size: 24px;
    font-size: var(--font-size-lg);
}
.mu_player {
    font-weight: bold;
    // font-size: 24px;
}
.matchup_legend {
    // font-size: 16px;
    font-style: italic;
    text-align: left;
}
.rd_button {
    font-size: 16px;
    text-align: center;
}
.summary {
    // font-size: 14px;
    font-size: var(--font-size-md);
}
.spread_key, 
.lapse_key {
    font-size: clamp(14px, 1.5vw, 20px);
}
.stamp {
    &:extend(.bold_focus_text);
    // font-size: 16px;
    font-size: var(--font-size-md);
    color: rgba(@main_white);
    text-transform: uppercase;
    text-shadow: @main_text_shadow;
}

/* J */
#start_dive > div {
    font-size: var(--font-size-md);
}
.filter {
    // font-size: 12px;
    font-size: var(--font-size-sm);
}
#filter-name > input, 
#filter-region > select, 
#filter-group > select, 
#filter-reset > span > input, 
.filter input[type=number] {
    font-family: @read_font;
}
#legend > text {
    font-family: @read_font;
    // font-size: 8px;
    font-size: var(--font-size-xs);
}

/* K */
.add_to_swarm {
    font-size: 10px;
}
span.raw_reveal {
    color: rgba(@main_red);
}
#multiple_dossier {
    font-size: var(--font-size-md);
}
.multiple_dossier_row:nth-child(n+4) {
    font-family: @focus_font;
    font-size: smaller;
}
.multiple_dossier_row:nth-last-child(-n+5) {
    font-family: @read_font;
    font-size: smaller;
    text-transform: capitalize;
}
.multiple_dossier_row:first-child {
    font-weight: bolder;
}
.multiple_dossier_data:first-child {
    &:extend(.bold_read_text);
    // font-size: 16px;
    font-size: var(--font-size-md);
}
.best_stat {
    font-weight: bolder;
    // font-size: medium;
    font-size: larger;
}

/* L-A-1 */
#history_pair input[type=number],
#round_time_pair input[type=number]{
    font-family: @focus_font;
}
.stat_filter_button {
    &:extend(.vlh_button);
}

/* L-B */
.kz_count, 
.toggle_eye, 
.toggle_global {
    font-size: 12px;
    paint-order: stroke;
    stroke: rgba(@main_white);
}
.toggle_eye, 
.toggle_global {
    fill: rgba(@main_white);
}

/* L-C-1 */
.agent_line > span, 
.agent_row > span {
    font-size: smaller;
    color: rgba(@main_white);
    text-align: center;
}
.loc_line > span {
    font-size: smaller;
    color: rgba(@main_white);
    text-align: center;
}

/* L-C-2 */
#full_table, 
.sopv_body > table {
    // font-size: 12px;
    font-size: var(--font-size-sm);
}
#full_table tbody td:first-child {
    font-weight: bolder;
}
#full_table tbody td:nth-child(n+3), 
.sopv_body > table > tbody td:nth-child(n+1) {
    text-align: right;
}

/* M */
#sopv_container_head {
    font-size: 40px;
    text-align: center;
}
#sopv_container_subtitle {
    font-size: 28px;
}    
#sopv_nav {
    font-size: var(--font-size-md);
	color: rgba(@main_white);;
}
#sopv_container select {
    &:extend(.bold_read_text);
    // font-size: 18px;
    font-size: var(--font-size-lg);
    color: rgba(@main_white);
    text-shadow: @main_text_shadow;
}
#sopv_container select option {
    color: rgba(@main_black);
    text-shadow: none;
}
#sopv_container select.map_list {
    text-align: left;
}
.sopv_title_box, 
.sopv_title {
    // font-size: 24px;
    font-size: var(--font-size-xl);
}
.sopv_title, 
.sopv_subtitle {
    text-align: center;
}
.sopv_subtitle {
    // font-size: 18px;
    font-size: var(--font-size-lg);
}
.sopv_title_date {
    // font-size: 12px;
    font-size: var(--font-size-sm);
}

/* N */
#map_logs > #full_table.player_log td:nth-child(-n+7), 
#map_logs > #full_table.team_log td:nth-child(-n+5) {
    text-align: left;
}
#paginator > div {
    font-weight: bolder;
    text-align: center;
}

/* O-A */
.sub_name {
    font-weight: bolder;
    font-size: 16px;
}
.sub_price {
    font-family: @focus_font;
    font-size: 32px;
}
.sub_spec {
    font-size: 14px;
}
.first_spec {
    font-weight: bolder;
    font-size: larger;
}

/* O-B */
#sub_detail > input {
    &:extend(.bold_read_text);
    font-size: 16px;
}

/* P */
.roster_link {
    font-weight: bolder;
}
.roster_line {
    font-family: @focus_font;
}
.map_stat_map_name {
    font-weight: bolder;
    font-size: var(--font-size-md);
    text-align: center;
}
.map_stat_line {
    font-family: @focus_font;
}
.mc_cap, 
#out_help, 
#contest_help, 
#econ_help, 
#sankey_help {
    font-family: @help_font;
    // font-size: 12px;
    font-size: var(--font-size-sm);
}    
.econ_level_desc {
    font-size: 12px;
}

/* Q */
.side_winner {
    font-weight: bolder;
    color: rgba(@main_red);
}
.each_round_number {
    &:extend(.bold_focus_text);
    color: rgba(@main_white);
    text-align: center;
}
#bs_toggle {
    font-size: var(--font-size-md);
}
.box_score {
    // font-size: 14px;
    font-size: var(--font-size-sm);
}
.box_score > table > tr > td {
    font-weight: lighter;
}
.bs_team_name {
    // font-size: 20px;
    font-size: var(--font-size-lg);
}
.box_score td:first-child {
    font-weight: bolder;
}
.box_score td:nth-child(n+3) {
    text-align: right;
}
.round_plant {
    color: rgba(@main_gray, .7);
    text-decoration: underline;
}

/* S */
footer {
    color: rgba(@main_white);
}

/* T-1 */
#current_odds, 
#past_odds {
	font-weight: bold;	
	// font-size: calc(0.6vmin + 0.5rem);
    font-size: var(--font-size-sm);
	text-align: center;
}

/* T-2 */
#infoboard {
	font-size: calc(2vmin + 0.5rem);
	color: rgba(@main_white);
	text-align: center;
}
#infoboard > #board_sub {
	font-size: calc(0.5vmin + 0.5rem);
}
#headboard, 
#navboard { 
	color: rgba(@main_white);
}
#leaderboard {
	font-family: "Lexend";
	font-size: 2vmin;
	color: rgba(@main_white);
	text-align: center;
}
.flap:not(.team_name), 
.not_team {
	color: rgba(@main_yellow, 0.9);
}
#navboard > .nav_item {
	font-family: 'Graduate';
	font-weight: bolder;	
	font-size: 12px;
	color: rgba(@main_white);
	text-align: center;
	text-shadow: @main_text_shadow;
}

/* T-3 */
#description{
	// font-size: calc(0.6vmin + 0.5rem);
    font-size: var(--font-size-sm);
}
.counts_plus > ul {
	list-style-type: none;
}
#past_chart svg text {
	fill: rgba(@main_white);
}
path.domain, 
.tick > line  {
	stroke: rgba(@main_yellow, 0.9);
	stroke-width: 1px;
}
#past_table, 
.past_chart_text {
	// font-size: 12px;
    font-size: var(--font-size-sm);
}
#past_table td:nth-child(n+3):nth-child(-n+6) {
	font-family: "Graduate";
}
#past_table td:nth-child(n+3) {
	text-align: right;
}
#past_table thead {
	// font-size: calc(0.3vmin + 0.4rem);
    font-size: var(--font-size-xs);
}

/* T-4 */
#no_rank {
	text-align: center;
}