/* Fonts:
Museo Sans 500 (headers and titles)
Lucida Sans Roman (web body text)
Myriad Pro Regular (print body text)
*/

/* Adobe web project SteamyKitchenGiveaways (contains Museo Sans 500) */
/* @import url("https://use.typekit.net/ikz2jaj.css"); */
/* Lucida Sans Roman is not a free font (Do we need to find an alternative?) */

/* :root {
  --skg_headings_font_family: museo-sans, sans-serif;
  --skg_headings_font_style: normal;
  --skg_headings_font_weight: 500;
} */

/* Color style constants from Amanda

My Name           | Pantone        | CMYK             | HEX     | RGB
------------------+----------------+------------------+---------+---------------------
skg_color_red     | 186PC          | C5  M100 Y76 K0  | #F22942 | rgb( 242,  41,  66 )
skg_color_teal    | 7466PC         | C78 M8   Y26 K0  | #47B3b3 | rgb(  71, 179, 179 )
skg_color_dk_gray | Cool Gray 10PC | C38 M29  Y20 K58 | #575351 | rgb(  87,  83,  81 )
skg_color_lt_gray | Warm Gray 3PC  | C6  M7   Y9  K15 | #D4CFC2 | rgb( 212, 207, 294 )
*/
:root {
  --skg_color_red: #f22942;
  --skg_color_teal: #47b3b3;
  --skg_color_gold: #d09b48;
  --skg_color_plum: #600f4c;
  --skg_color_dk_gray: #575351;
  --skg_color_lt_gray: #d4cfc2;
  /* White is not in the spec, but it might eventually be */
  --skg_color_white: #fff;
}

/* My defaults */
/*
 * TODO: Thinking about defaults.
 * Really should scope this better such that the CSS file sets
 * the defaults in ".skg-giveaway" then the php can override the variables
 * using a unique giveaway id ".skg-giveaway#skg-giveaway-<giveaway-id>".
 * This will fix the problem I'm seeing where the shortcode version loads
 * the css in the footer, overriding the inline css.
 */
:root {
  --skg_transition_duration: 200ms;
  --skg_transition_function: ease-in-out;
  --skg_bonus_title_left_right_padding: 20px;
  --skg_form_input_border_width: 3px;
  --skg_form_input_border_color: var(--skg_color_dk_gray);
  --skg_scoreboard_icon_size: 60px;
  --skg_error_color: var(--skg_color_red);
  --skg_emphasis_color: var(--skg_color_red);
  /* Moving this into the php relm as well */
  /* --skg_unhide_duration: 500ms; */
  /* Putting these here is problematic for shortcode giveaways as well (see below) */
  /* --skg_progress_bar_color: var(--skg_color_red);
  --skg_progress_bar_duration: 2000ms;
  --skg_progress_msg_duration: 667ms; */
}

/* Defaults controlled by WordPress options */
/*
 * Having them defined here causes problems for shortcode giveaways because the CSS is loaded in the footer.
 * Commenting out here and relying on them to be defined inline with the giveaway.
 */
/* :root {
  --skg_giveaway_border_color: var(--skg_color_gold);
  --skg_giveaway_entry_button_color: var(--skg_color_plum);
  --skg_giveaway_entry_button_text_color: var(--skg_color_white);
  --skg_giveaway_link_button_color: var(--skg_color_gold);
  --skg_giveaway_link_button_text_color: var(--skg_color_white);
  --skg_giveaway_active_bonus_color: var(--skg_color_plum);
  --skg_giveaway_active_bonus_text_color: var(--skg_color_white);
  --skg_giveaway_inactive_bonus_color: var(--skg_color_gold);
  --skg_giveaway_inactive_bonus_text_color: var(--skg_color_white);
  --skg_giveaway_scoreboard_icon_color: var(--skg_color_plum);
} */

/* Entire giveaway styles */
.skg-giveaway {
  /* Center it on the page */
  margin-left: auto;
  margin-right: auto;

  /* Give it some space away from the giveaway body text above */
  margin-top: 40px;

  /* Center the text within the giveaway */
  text-align: center;

  /* Border */
  border: 10px solid var(--skg_giveaway_border_color);
}

/* Bottom padding for the divs for spacing */
.skg-giveaway > div {
  padding-bottom: 20px;
}

/* Not sure how this will work with hiding/unhiding divs */
/* The first div needs top padding as well */
.skg-giveaway > div:first-of-type {
  padding-top: 20px;
}

/* Headings and titles */
.skg-giveaway h1,
.skg-giveaway h2,
.skg-giveaway h3,
.skg-giveaway h4,
.skg-giveaway h5,
.skg-giveaway h6,
.skg-giveaway input,
.skg-giveaway button {
  /* Font family, style, weight */
  /* font-family: var(--skg_headings_font_family);
  font-style: var(--skg_headings_font_style);
  font-weight: var(--skg_headings_font_weight); */

  /* Reset the margins and padding */
  margin: 0;
  padding: 0;
}

/* Body text */
.skg-giveaway p,
.skg-giveaway label {
  /* Font family, style, weight */
  /* TODO: The design document says this should be Lucida Sans */
  /* font-family: var(--skg_headings_font_family);
  font-style: var(--skg_headings_font_style);
  font-weight: var(--skg_headings_font_weight); */

  /* Reset the margins and padding */
  margin: 0;
  padding: 0;
}

/* Label specific */
.skg-giveaway label {
  /* Inherit the font size */
  font-size: inherit;
}

/* Buttons */
/* TODO: Really should use theme stylings here,
         but Divi theme styles are hard to automatically pick up */
.skg-giveaway button {
  /* Color */
  color: var(--skg_giveaway_entry_button_text_color);
  background-color: var(--skg_giveaway_entry_button_color);

  /* No visible border or outline, but rounded corners */
  border: 0;
  border-radius: 4px;
  outline: 0;

  /* Increase the font size (want to match the input box size) */
  font-size: 20px;

  /* Have to decrease the padding to match the font */
  padding: 10px 15px;

  /* Cursor */
  cursor: pointer;
}

/* Common left/right padding across most text blocks */
.skg-giveaway-title,
.skg-giveaway-description,
.skg-giveaway-thank-you,
.skg-giveaway-already-entered,
.skg-giveaway-return-tomorrow,
.skg-giveaway-bonus-greeting,
.skg-giveaway-entry-form .skg-form {
  padding-left: 10%;
  padding-right: 10%;
}

/* TODO: What to do with hover behavior */

/****************************
Giveaway logo specific styles
*****************************/
.skg-giveaway-logo img {
  /* Scale width */
  /* For small screens --> width: 80% */
  /* For larger screens --> max-width: 200px */
  width: 80%;
  max-width: 200px;

  /* Center */
  margin-left: auto;
  margin-right: auto;
}

/*****************************
Giveaway title specific styles
******************************/

.skg-giveaway-title {
  /* Force the title to uppercase */
  text-transform: uppercase;
}

.skg-giveaway-title h1 {
  /* Increase the line-height just in case it ends up being multiple lines */
  line-height: 1.3em;
}

/***********************************
Giveaway description specific styles
************************************/

/**********************************
Giveaway entry form specific styles
***********************************/

/* Make the entire form the same width and centered */
/* NOTE: Moved this into a common style above */
/* .skg-giveaway-entry-form .skg-form { */
/* Using padding over width/margin, seems to work better */
/* width: 80%;
  margin: 0 auto; */
/* padding-left: 10%;
  padding-right: 10%; */
/* } */

/* Center the reCAPTCHA error message under the form */
.skg-giveaway-entry-form #recaptcha_error {
  margin: 1em auto;
  padding-left: 10%;
  padding-right: 10%;
  text-align: center;
}

/* Hide the labels */
.skg-giveaway-entry-form .skg-text-box > label {
  display: none;
}

/* Space/size the surrounding div */
.skg-giveaway-entry-form .skg-text-box {
  /* Space between fields vertically */
  margin-bottom: 10px;

  /* Div width */
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* Size the textbox inside the div */
.skg-giveaway-entry-form .skg-text-box > input {
  width: 100%;
}

/* ****************************************
 * Custom checkbox and radio button styling
 * ****************************************/

label.skg-checkbox-container,
label.skg-radio-container {
  /* Flexbox */
  display: flex;
  /* justify-content: space-between; */
  align-items: center;

  /* Change the cursor and make contents not selectable */
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* Give it some bottom margin (matching the margin of the text inputs) */
  margin-bottom: 10px;
}

/* Hide the default checkbox */
.skg-checkbox-box input,
.skg-radio-box input {
  /* Position absolute takes it out of the layout flow */
  /* Requires .skg-checkbox-box to not be static (in this case it is relative) */
  position: absolute;
  opacity: 0;
  /* cursor: pointer; */
  height: 0;
  width: 0;
}

/* Align the label text to the left */
.skg-checkbox-label,
.skg-radio-label {
  text-align: left;
}

/* Put borders around the flexbox items for layout debug */
/* .skg-checkbox-container>div {
  border: 1px solid black;
} */

.skg-checkbox-box,
.skg-radio-box {
  /* Give the checkbox some space between it and the label */
  padding-right: 20px;
  /* Make position: relative to be able to position the input and checkmark correctly */
  position: relative;
}

/* Unchecked (default) checkmark styling */
.skg-checkbox-checkmark::before,
.skg-radio-checkmark::before {
  /* Not visible */
  opacity: 0;

  /* Make the checkmark white */
  color: white;

  /* Position the checkmark to be inside the checkbox */
  position: relative;
  top: -7px;
  left: -9px;

  /* Transition animation for opacity */
  transition: opacity var(--skg_transition_duration)
    var(--skg_transition_function);
}

/* Checked checkmark styling */
input:checked ~ .skg-checkbox-checkmark::before,
input:checked ~ .skg-radio-checkmark::before {
  /* Visible */
  opacity: 1;
}

/* Unchecked (default) checkbox styling */
/* Class .dashicons required to override WP default font-size/width/height styles */
.skg-checkbox-checkmark.dashicons,
.skg-radio-checkmark.dashicons {
  /* Size the checkmark to fill up the checkbox */
  font-size: 32px;
  /* Box height/width, same as the .dashicons style, but this gives more control */
  width: 23px;
  height: 23px;
  /* Put a box around the checkmark */
  border: var(--skg_form_input_border_width) solid
    var(--skg_form_input_border_color);
  background-color: transparent;

  /* Transition animation for border-color and background-color */
  transition: all var(--skg_transition_duration) var(--skg_transition_function);
  transition-property: border-color, background-color;
}

/* Round the corners of the radio button checkbox */
.skg-radio-checkmark {
  border-radius: 50%;
}

/* Checked checkbox styling */
input:checked ~ .skg-checkbox-checkmark,
input:checked ~ .skg-radio-checkmark {
  /* Change border and background to red */
  border-color: var(--skg_giveaway_entry_button_color);
  background-color: var(--skg_giveaway_entry_button_color);
}

/* Hover styling */
.skg-checkbox-container:hover .skg-checkbox-checkmark,
.skg-radio-container:hover .skg-radio-checkmark {
  /* Black border */
  border-color: var(--skg_form_input_border_color);
  /* Red background */
  background-color: var(--skg_giveaway_entry_button_color);
}

/* END Alternate checkbox styling */

/* *****************************
 * Bonus section specific styles
 * *****************************/

div.skg-giveaway-bonus-entries {
  /* Undo the blind adding of bottom padding on all giveaway sections */
  /* This makes sense to me because of the accordion and the bonus body will have bottom padding */
  padding-bottom: 0;
}

/*****************************
 * Bonus Title specific styles 
 *****************************/

/* Default (closed) style */
.skg_bonus_title {
  /* Colors */
  background-color: var(--skg_giveaway_inactive_bonus_color);
  color: var(--skg_giveaway_inactive_bonus_text_color);

  /* Make the color change smooth */
  /* transition: <property> <duration> <timing-function> <delay> */
  transition: background-color var(--skg_transition_duration)
    var(--skg_transition_function);

  /* Small side and bottom margin to give it some space between it and other elements */
  margin: 0 2px 2px 2px;

  /* Some defaults for sub-elements */
  --skg_icon_font_size: 30px;

  /* Default to pointer cursor and make the title text not selectable */
  /* cursor: pointer; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Pulled the cursor style out of the general title selector, it should only be used with accordion style */
.skg_bonus_style_accordion .skg_bonus_title {
  cursor: pointer;
}

.skg_bonus_title .skg_bonus_title_text h3 {
  /* Bonus titles need a heavier font weight */
  font-weight: 600;
}

/* Hover while closed and open style */
.skg_bonus_style_accordion.skg_bonus_closed .skg_bonus_title:hover,
.skg_bonus_style_accordion.skg_bonus_open .skg_bonus_title {
  /* Colors */
  background-color: var(--skg_giveaway_active_bonus_color);
  color: var(--skg_giveaway_active_bonus_text_color);
}

/* Hover while open style */
.skg_bonus_style_accordion.skg_bonus_open .skg_bonus_title:hover {
  background-color: var(--skg_giveaway_inactive_bonus_color);
  color: var(--skg_giveaway_inactive_bonus_text_color);
}

/* Completed bonus style */
.skg_bonus_completed .skg_bonus_title,
.skg_bonus_completed .skg_bonus_title:hover,
.skg_bonus_completed.skg_closed .skg_bonus_title,
.skg_bonus_completed.skg_closed .skg_bonus_title:hover {
  /* Force the background color */
  background-color: var(--skg_giveaway_inactive_bonus_color);
  color: var(--skg_giveaway_inactive_bonus_text_color);
  /* Change the cursor */
  cursor: not-allowed;
  /* Grey out the title */
  opacity: 0.5;
}

.skg_bonus_completed .skg_bonus_title_plus_minus,
.skg_bonus_style_scrolling .skg_bonus_title_plus_minus {
  /* Make it disappear */
  opacity: 0;
}

.skg_bonus_completed .skg_bonus_title_icon .dashicons:before {
  /* Turn it into a checkmark (dashicons-yes-alt) */
  content: "\f12a";
}

/* Bonus body overlay styling, should only take effect on completed bonuses */
.skg_bonus_body {
  position: relative;
}
.skg_bonus_body_overlay {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  /* Gray out the bonus without it looking gray */
  background-color: rgba(255, 255, 255, 0.5);
  color: white;
  cursor: not-allowed;

  /* Use flexbox to center the checkmark */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Need to declare the padding here in a special way to override an earlier paddinng style */
.skg_bonus_body > .skg_bonus_body_overlay {
  padding: 0;
}

/* Style the checkmark within the overlay */
.skg_bonus_body_overlay_checkmark {
  --skg_checkmark_image_size: 250px;
  height: var(--skg_checkmark_image_size);
  width: var(--skg_checkmark_image_size);
  background-image: var(--skg_checkmark_image_url);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
/* .skg_bonus_body_overlay_checkmark .dashicons { */
/* color: #600f4c; */
/* color: var(--skg_giveaway_completed_bonus_checkmark_color); */
/* font-size: var(--skg_checkmark_font_size); */
/* height: var(--skg_checkmark_font_size); */
/* width: var(--skg_checkmark_font_size); */
/* } */

/* ********************************
 * Bonus Title icon specific styles
 * ********************************/

.skg_bonus_title_icon {
  text-align: left;
}

.skg_bonus_title_icon .dashicons {
  font-size: var(--skg_icon_font_size);
  /* Required because dashicons use pseudo elements */
  width: var(--skg_icon_font_size);
  height: var(--skg_icon_font_size);
}

/* **************************************
 * Bonus Title plus/minus specific styles
 * **************************************/

.skg_bonus_title_plus_minus::before {
  /* \002b == plus sign */
  content: "\002b";
  font-weight: bold;
  font-size: var(--skg_icon_font_size);

  /* Must make the pseudo element a block for transform to take effect */
  display: block;
  transform: rotate(90deg);
  /* Would like to animate the content change too, but that isn't easily possible using just CSS */
  /* transition: all var(--skg_transition_duration) var(--skg_transition_function);
  transition-property: transform, content; */
  transition: transform var(--skg_transition_duration) linear;
}

.skg_bonus_open .skg_bonus_title_plus_minus::before {
  /* \2212 == minus sign */
  content: "\2212";

  /* Transform it back */
  transform: rotate(0deg);
}

/**********************************
 * Bonus Title text specific styles
 **********************************/

.skg_bonus_title_text h3 {
  /* Force upper case */
  text-transform: uppercase;

  /* Text color (overrides Divi styles) */
  /* Default (closed) style */
  color: var(--skg_giveaway_inactive_bonus_text_color);
}

/* Hover while closed and open style */
.skg_bonus_closed .skg_bonus_title:hover .skg_bonus_title_text h3,
.skg_bonus_open .skg_bonus_title .skg_bonus_title_text h3 {
  color: var(--skg_giveaway_active_bonus_text_color);
}

/* Hover while open style */
.skg_bonus_open .skg_bonus_title:hover .skg_bonus_title_text h3 {
  color: var(--skg_giveaway_inactive_bonus_text_color);
}

/* Completed bonus style */
.skg_bonus_completed .skg_bonus_title .skg_bonus_title_text h3,
.skg_bonus_completed .skg_bonus_title:hover .skg_bonus_title_text h3,
.skg_bonus_completed.skg_closed .skg_bonus_title .skg_bonus_title_text h3,
.skg_bonus_completed.skg_closed
  .skg_bonus_title:hover
  .skg_bonus_title_text
  h3 {
  color: var(--skg_giveaway_inactive_bonus_text_color);
}

/* **************************
 * Bonus Title flexbox styles
 * **************************/

.skg_bonus_title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Pad left and right equally */
  padding: 5px var(--skg_bonus_title_left_right_padding);
}

.skg_bonus_title_icon,
.skg_bonus_title_plus_minus {
  /* Icon and plus/minus, don't grow or shrink */
  /* Have to make basis auto or it screws up the rotate transition */
  /* flex: <grow> <shrink> <basis> */
  flex: 0 0 auto;
}

.skg_bonus_title_text {
  /* Pad the sides to give it space for long title texts */
  padding: 0 var(--skg_bonus_title_left_right_padding);
}

/* **************************
 * Bonus Body specific styles
 * **************************/

.skg_bonus_body {
  /* Using padding over width/margin, seems to work better */
  /* width: 80%;
  margin: 0 auto; */
  padding-left: 10%;
  padding-right: 10%;
}

/* TODO: This padding is the same as the .skg-giveaway>div styling, maybe generalize */
.skg_bonus_body > div {
  padding-bottom: 20px;
}

/* The first div needs top padding as well */
.skg_bonus_body > div:first-of-type {
  padding-top: 20px;
}

/* TODO: This is another case where I can generalize. Similar to entry form */
.skg_multiple_choice,
.skg_survey {
  padding-bottom: 15px;
}

/* Buttons with dashicons need some breathing room */
.skg-enter-button .dashicons::before,
.skg-external-link-button .dashicons::before {
  padding-left: 10px;
}

.skg-enter-button .dashicons,
.skg-external-link-button .dashicons {
  width: 1.3em;
  height: 1.3em;
}

/* All buttons need a heavier font weight */
.skg-enter-button,
.skg-external-link-button {
  font-weight: 600;
}

/* Make the external link buttons a different color and a little smaller */
.skg-giveaway button.skg-external-link-button {
  /* Change the color to teal */
  color: var(--skg_giveaway_link_button_text_color);
  background-color: var(--skg_giveaway_link_button_color);

  /* Reduce the font size from 20px (enter button text) to 17px (description text) */
  font-size: 17px;

  /* Have to decrease the padding to match the font */
  padding: 8px 15px;
}

/* ***********************************
 * Bonus accordion open/close behavior
 * Using for hidden elements as well
 * ***********************************/

/* Default (closed) state */
/* Use this only for skg_bonus_accordion style, not skg_bonus_scrolling */
.skg_bonus_style_accordion .skg_bonus_body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;

  /* transition: all var(--skg_transition_duration) var(--skg_transition_function); */
  transition: all 500ms var(--skg_transition_function);
  transition-property: max-height, opacity;
}

/* The body of a closed bonus is not clickable */
.skg_bonus_closed .skg_bonus_body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Open state */
.skg_bonus_open .skg_bonus_body {
  max-height: 2000px;
  opacity: 1;
}

/* Default (unhidden) state */
/* Increase max-height to 3000px due to scrolling bonuses */
/* TODO: This is a clunky way of hiding things, revise */
.skg-giveaway-element {
  overflow: hidden;
  max-height: 3000px;
  opacity: 1;

  /* transition: all var(--skg_transition_duration) var(--skg_transition_function); */
  transition-property: max-height, opacity, margin, padding;
  transition-duration: var(--skg_unhide_duration);
  transition-timing-function: var(--skg_transition_function);
}

/* Trying to fix a strange problem where the video is "clickable" while the bonus is closed */
/* Make the video container height/width 0 while closed */
.skg_bonus_style_accordion.skg_bonus_closed .skg_bonus_video_container {
  height: 0;
  width: 0;
}

/* Hidden state */
.skg-giveaway-element.skg_hidden,
.skg-giveaway-scoreboard-element.skg_hidden {
  max-height: 0;
  opacity: 0;

  /* Hidden elements shouldn't have any margin or padding */
  margin: 0;
  padding: 0;

  /* Hidden elements shouldn't be clickable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* *************************************
 * Multiple choice input specific styles
 * *************************************/

.skg_multiple_choice_question {
  /* Bottom margin to match the answers */
  margin-bottom: 10px;
  /* Align left to the answer container */
  text-align: left;
}

.skg_multiple_choice {
  /* Inset the entire multiple choice container */
  padding-left: 10%;
  padding-right: 10%;
}

/* *****************************************************
 * Long form bonus text input (textarea) specific styles 
 * *****************************************************/

.skg_survey_answer textarea {
  max-width: 100%;
}

/* **************************
 * Text input specific styles
 * text, email, textarea, others?
 * **************************/

.skg-giveaway input[type="text"],
.skg-giveaway input[type="email"],
.skg-giveaway textarea {
  /* Border */
  border: var(--skg_form_input_border_width) solid
    var(--skg_form_input_border_color);

  /* Font size */
  font-size: 20px;

  /* Padding  */
  padding: 8px;
}

.skg-giveaway input[type="text"]::placeholder,
.skg-giveaway input[type="email"]::placeholder,
.skg-giveaway textarea::placeholder {
  /* Force the placeholder to uppercase */
  text-transform: uppercase;
}

/* ***********************************
 * "Come back tomorrow" message styles
 * ***********************************/

.skg-giveaway-return-tomorrow > p > strong {
  /* Color */
  color: var(--skg_emphasis_color);

  /* Font size */
  font-size: x-large;
}

.skg-giveaway-return-tomorrow > h3 {
  /* Color */
  color: var(--skg_emphasis_color);

  /* Font weight */
  font-weight: 600;
}

.skg-giveaway-return-tomorrow button {
  /* Give the button some breathing room */
  margin: 10px auto;
}

/* Do the same for the button on the ended element */

.skg-giveaway-ended button {
  /* Give the button some breathing room */
  margin: 10px auto;
}

/* **************************
 * Scoreboard specific styles
 * **************************/

.skg-giveaway-scoreboard {
  display: flex;
  /* Change to space-evenly to make it more even */
  /* justify-content: space-around; */
  justify-content: space-evenly;
  gap: 10px;
  flex-wrap: wrap;

  /* Add top padding to space it with the bonuses */
  padding-top: 20px;
  /* Pad left and right to align with bonus title */
  padding-left: var(--skg_bonus_title_left_right_padding);
  padding-right: var(--skg_bonus_title_left_right_padding);
}

.skg-giveaway-scoreboard-element {
  flex: 0 0 auto;
}

.skg-giveaway-scoreboard-element.skg_hidden {
  /* Take it out of the document flow so there aren't any empty spaces */
  position: absolute;
}

.skg-giveaway-scoreboard-element .dashicons {
  color: var(--skg_giveaway_scoreboard_icon_color);

  font-size: var(--skg_scoreboard_icon_size);
  /* Required because dashicons use pseudo elements */
  width: var(--skg_scoreboard_icon_size);
  height: var(--skg_scoreboard_icon_size);
}

.skg-giveaway-scoreboard-element h5 {
  /* Make the scoreboard element heading bold */
  font-weight: bold;
  /* Give it some space */
  padding: 0.3em 0;
}

.skg-giveaway-scoreboard-element p {
  /* Tighten up the line spacing */
  line-height: 1.2em;
}

/* ********************
 * Input errors styling
 * ********************/

/* Style the invalid text box input */
input[type="text"].skg_input_error,
input[type="email"].skg_input_error,
textarea.skg_input_error {
  border-color: var(--skg_error_color);
  background-color: var(--skg_color_lt_gray);
}

.skg_input_error:invalid::placeholder {
  font-style: italic;
  color: var(--skg_error_color);
}

/* END Style the invalid text box input */

/* Style the invalid checkbox and radio input */
input[type="checkbox"].skg_input_error ~ .skg-checkbox-checkmark,
input[type="radio"].skg_input_error ~ .skg-radio-checkmark {
  background-color: var(--skg_error_color);
}

/* Style wrong answer for a multiple choice quiz */
/* TODO: This selector is wrong, not sure what I want to do is possible via CSS */
.skg-radio-box
  > input[name="multiple_choice_answer"].skg_input_error
  ~ .skg-radio-label {
  background-color: var(--skg_color_lt_gray);
}

/* Style the error message */
.skg_error_message {
  text-align: left;
  font-style: italic;
  color: var(--skg_error_color);
}

/* *******************
 * Progress bar styles
 * *******************/

.skg-pb-bar {
  height: 30px;
  margin-left: 10%;
  margin-right: 10%;
  background-image: linear-gradient(
    to right,
    var(--skg_progress_bar_color),
    var(--skg_progress_bar_color) 50%,
    transparent 55%,
    transparent
  );
  border: 3px solid var(--skg_progress_bar_color);
  border-radius: 4px;
  background-size: 225%;
  /* This is the position at the end of the animation */
  background-position: left;
  /*
   * Animate in two phases:
   *   1) stay at 0% until unhidden
   *   2) grow from 0 to 100% for the duration of the animation
   */
  animation-name: bar-hold-at-0-percent, bar-0-to-100-percent;
  animation-duration: var(--skg_unhide_duration),
    var(--skg_progress_bar_duration);
  animation-delay: 0ms, var(--skg_unhide_duration);
  animation-timing-function: linear;
  animation-play-state: paused;
}
.skg-pb-msg-container {
  margin-top: 5px;
  height: 30px;
}
.skg-pb-msg {
  /* Position all messages on top of each other and centered under the progress bar */
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  /* Make them all hidden to begin with */
  opacity: 0;
  /* Default animation: start hidden, then fade in and out again */
  --msg_hidden_duration: var(--skg_unhide_duration);
  --msg_fade_duration: var(--skg_progress_msg_duration);
  animation-name: msg-stay-hidden, msg-fade-in-and-out;
  animation-duration: var(--msg_hidden_duration), var(--msg_fade_duration);
  animation-delay: 0ms, var(--msg_hidden_duration);
  animation-timing-function: linear;
  animation-play-state: paused;
}
.skg-pb-msg:last-child {
  /* Make the last message visible, this is the steady state */
  opacity: 1;
  /* Default animation (overrides default above): start hidden, then fade in */
  animation-name: msg-stay-hidden, msg-fade-in;
}
/* A little less ugly solution than what I tried before. */
/* The only thing that changes is the hidden duration. Depends on which child the message is. */
/* For the first message, do nothing, it is the same as the default */
.skg-pb-msg:nth-child(1) {
  --msg_hidden_duration: var(--skg_unhide_duration);
}
/* For the following messages, the hidden duration depends on how many messages before it */
.skg-pb-msg:nth-child(2) {
  --msg_hidden_duration: calc(
    var(--skg_unhide_duration) + var(--skg_progress_msg_duration)
  );
}
.skg-pb-msg:nth-child(3) {
  --msg_hidden_duration: calc(
    var(--skg_unhide_duration) + (2 * var(--skg_progress_msg_duration))
  );
}
/* Start the animation */
.skg-giveaway-progress-bar.skg-pb-play .skg-pb-bar,
.skg-giveaway-progress-bar.skg-pb-play .skg-pb-msg {
  animation-play-state: running;
}
.skg-giveaway-progress-bar:hover .skg-pb-bar,
.skg-giveaway-progress-bar:hover .skg-pb-msg {
  animation-play-state: running;
}
@keyframes bar-hold-at-0-percent {
  from {
    background-position: right;
  }
  to {
    background-position: right;
  }
}
@keyframes bar-0-to-100-percent {
  from {
    background-position: right;
  }
  to {
    background-position: left;
  }
}
@keyframes msg-stay-hidden {
  from {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}
@keyframes msg-fade-in-and-out {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes msg-fade-in {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* ************
 * Debug styles
 * ************/
/* .skg-giveaway-element,
.skg-giveaway-element.skg_hidden {
  border: 1px solid black;
} */