//*Vars go here *//
$font_family: Arial, Helvetica, sans-serif;
$white: #ffffff;
$black: #000000;
$main_text: #f9f9f9;
$bootstrap-dark: #1b222c;
$light_grey_bg: #eee;
$datatables_bg: #ff4136;
$datatables_selected_color: #3c3c3c;

/* ---------------------------------------------------
    GENERAL USE/MAIN
--------------------------------------------------- */
body {
  font-family: $font_family !important;
  margin-left: auto;
  margin-right: auto;
  &::-webkit-scrollbar {
    width: 0.5rem !important;
  }
  &::-webkit-scrollbar-track {
    background: $white !important;
  }
  &::-webkit-scrollbar-thumb {
    background: $bootstrap-dark !important;
  }
}

@mixin titles() {
  font-family: $font_family;
  margin-top: 0.5em !important;
}

.page_title,
.section_title {
  @include titles();
}

.country_section_title {
  @include titles();
  margin-left: 0.5em !important;
}

/* Sets Cursor to default when hovering over Plotly graphs */
.cursor-crosshair {
  cursor: default !important;
}

/* Solves some lines not having the correct font for unknown reasons */
h1,
h2,
h3,
h4,
h5,
p,
span,
table,
th,
td {
  font-family: $font_family !important;
}

/* For Churchill quote on main.py */
#quote_text {
  font-style: italic;
}

blockquote {
  margin: 0;
  p {
    padding: 1em;
    background: $light_grey_bg;
    border-radius: 0.5em;
    &:before {
      content: "\201C";
    }
    &:after {
      content: "\201D";
    }
  }
}

@mixin tables() {
  margin-top: 1em;
  margin-bottom: 1em;
  font-family: $font_family;
}

/* Table Sort Colors*/
.dash-spreadsheet-container table {
  /* Column Arrow */
  --accent: $white !important;
  /* Pagination Arrow and Selected Cell */
  --selected-background: $datatables_bg !important;
  --selected-color: $datatables_selected_color !important;
}

.section_divider {
  margin-top: 0em;
  margin-bottom: 0.25em;
}

/* ---------------------------------------------------
    INDEX CARDS ON MAIN PAGE
--------------------------------------------------- */
.card {
  border-radius: 4px;
  background-color: $main_text;
  box-shadow: 0 6px 10px rgba($black, 0.08), 0 0 6px rgba($black, 0.05);
  transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
    0.3s box-shadow,
    0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
  padding: 7px 40px 9px 18px;
  cursor: pointer;
  width: 20rem;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-decoration: "none";
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba($black, 0.12), 0 4px 8px rgba($black, 0.06);
    background-color: $white;
    text-decoration: none !important;
  }
  img {
    position: absolute;
    top: 20px;
    right: 15px;
    max-height: 120px;
  }
}

/* Prevents link area from being larger than the card itself */
.card-link {
  display: inline-block !important;
  width: 20rem !important;
}

#main_page_intro {
  margin-top: 1em;
}

.card-link,
.card_title {
  font-family: $font_family !important;
  color: $black;
  text-decoration: none !important;
  &:hover {
    text-decoration: none !important;
    color: $black;
  }
  &:active {
    text-decoration: none !important;
  }
}

#card_row {
  margin-top: 1em !important;
}

/* For Mobile Screens */
@media screen and (max-width: 430px) {
  #card_row {
    margin-left: 0.5em;
  }
}

@mixin cards-settings() {
  background-repeat: no-repeat;
  background-position: 95%;
  background-size: 80px;
}

#card-1 {
  background-image: url(/assets/img/country_flags/united-nations.svg);
  @include cards-settings;
}

#card-2 {
  background-image: url(/assets/img/country_flags/wales.svg);
  @include cards-settings;
}

#card-3 {
  background-image: url(/assets/img/country_flags/corsica.svg);
  @include cards-settings;
}

#card-4 {
  background-image: url(/assets/img/country_flags/galapagos-islands.svg);
  @include cards-settings;
}

#card-5 {
  background-image: url(/assets/img/country_flags/aruba.svg);
  @include cards-settings;
}

#card-6 {
  background-image: url(/assets/img/country_flags/christmas-island.svg);
  @include cards-settings;
}

#card-7 {
  background-image: url(/assets/img/country_flags/british-columbia.svg);
  @include cards-settings;
}

#card-8 {
  background-image: url(/assets/img/country_flags/isle-of-man.svg);
  @include cards-settings;
}

#card-9 {
  background-image: url(/assets/img/country_flags/norfolk-island.svg);
  @include cards-settings;
}

/* ---------------------------------------------------
    COUNTRIES PAGE
--------------------------------------------------- */
.data_date_line {
  font-size: small;
  margin-bottom: 0.5em;
}

#exclusions_info {
  margin-bottom: 1em;
}

#country_name {
  margin-top: 0.25em;
  margin-left: 0.5em;
}

#countries_dropdown {
  cursor: pointer !important;
  position: relative;
  display: inline-block;
  width: 50%;
  margin-top: 0.25em;
}

.Select-value {
  cursor: pointer !important;
}

#dropdown_title {
  margin-top: 0.5em;
  font-style: italic;
}

#colorblind {
  justify-content: right;
  margin-top: 0.5em;
  font-size: small;
}

#country_table,
#elections_table {
  @include tables();
  font-size: 15px;
}

.asterisk {
  font-weight: bolder !important;
  font-size: 22px;
}

.underlined_word {
  text-decoration: underline;
}

/* ---------------------------------------------------
    FUN PAGE
--------------------------------------------------- */
/* Prevents lists for being too long */
.inline_list {
  list-style: none;
  li {
    display: inline-block;
    margin-right: 0.5em;
  }
}

.fun_para {
  margin-bottom: 0.25em;
}

#check_later {
  margin-top: 1.75em;
  text-align: center;
  font-style: italic;
}

/* ---------------------------------------------------
    PARTIES PAGE
--------------------------------------------------- */
#parties_table {
  @include tables();
}

/* ---------------------------------------------------
    ELECTIONS PAGE
--------------------------------------------------- */
#full_elections_table,
#turnout_table {
  font-size: 15px;
  @include tables();
}

/* ---------------------------------------------------
    INDEPENDENTS PAGE
--------------------------------------------------- */
#indie_table {
  font-size: 15px;
  @include tables();
}

/* ---------------------------------------------------
    WOMEN PAGE
--------------------------------------------------- */
#women_table {
  font-size: 15px;
  @include tables();
}

/* ---------------------------------------------------
    NAVBAR
--------------------------------------------------- */
.navbar,
.brand {
  font-family: $font_family;
  color: $white;
}

/* ---------------------------------------------------
    CRITERIA/EXCLUSIONS
--------------------------------------------------- */
.criteria_li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#first_criteria {
  margin-top: 0.75em;
}

#fourth_criteria {
  margin-bottom: 0em;
}

#excluded_country_table {
  @include tables();
}

#exclusions_bot_line {
  font-style: italic;
  font-size: larger;
}

/* ---------------------------------------------------
    FOOTER
--------------------------------------------------- */
.footer_text {
  text-align: center;
  font-family: $font_family;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
}

#footer {
  margin-top: 2em;
  margin-bottom: 1em;
}

/* ---------------------------------------------------
    DISPLAY LINKS IF PAGE IS PRINTED
--------------------------------------------------- */
@media print {
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* ---------------------------------------------------
    MOBILE SCREENS
--------------------------------------------------- */
/* Mobile */
@media only screen and (max-width: 455px) {
  #countries_dropdown {
    width: 70%;
  }
}

/* Smaller Mobile */
@media only screen and (max-width: 375px) {
  #countries_dropdown {
    width: 77%;
  }
}