/*
 * The application.css is used by every system, but they each have their own stylesheet which is probably loaded first.
 * This stylesheet will rely on variables like `var(--button-x, var(cuttle-button-x))` where the first one is checking
 * whether the variable might be defined in the system's custom stylesheet, the fallback resorts to Cuttle default values.
 *
 * The system specific variables are DELIBERATELY not defined here, they should only be defined in the custom stylesheets.
 * System specific variables NEVER start with --cuttle.
 */
:root {
  --cuttle-button-background: #ffffff;
  --cuttle-button-border: #cccccc;
  --cuttle-button-text: #222222;
  --cuttle-button-hover-background: #f5f5f5;
  --cuttle-button-hover-border: #888888;
  --cuttle-button-focus-outline: #555555;

  --cuttle-classroom-image-background: #ffffff;
  --cuttle-classroom-image-border: #cccccc;
  --cuttle-classroom-image-hover-background: #f5f5f5;
  --cuttle-classroom-image-hover-border: #888888;
  --cuttle-classroom-image-focus-outline: #555555;
  --cuttle-classroom-image-selected-background: #eeeeee;
  --cuttle-classroom-image-selected-border: #555555;
}

/* Clock css */
.cuttle-competition-clock {
  position: relative;
  z-index: 1;
  width: 285px;
  height: 40px;
}

.cuttle-competition-clock__display {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.cuttle-competition-clock .cuttle-competition-clock__progress-bar {
  z-index: -1;
  position: absolute;
  height: 100%;
  width: 100%;
}

.cuttle-competition-clock__progress-bar {
  border: 3px solid black;
  border-radius: 25px;
  box-sizing: border-box;
  overflow: hidden;
}

.cuttle-competition-clock-progress-bar__svg {
  display: block;
  width: 100%;
  height: 100%;

  & rect {
    fill: #24d0ff;
  }
}

/*
 * Classroom student login: the three selection steps.
 *
 *   --button-*           the button that a student clicks to make a choice or to open a page
 *   --classroom-image-*  the button of one authentication image
 */

/* One button for each Classroom, student or classmate */
.classroom-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-bottom: 15px;
}

.classroom-options__label {
  text-align: center;
}

.classroom-options .classroom_login_button--option,
.classroom_login_button--join {
  display: inline-block;
  border: 2px solid var(--button-border, var(--cuttle-button-border));
  border-radius: 8px;
  background: var(--button-background, var(--cuttle-button-background));
  color: var(--button-text, var(--cuttle-button-text));
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* The choices stand next to each other, thus give each choice the same minimum width */
.classroom-options .classroom_login_button--option {
  min-width: 150px;
}

/* The join button stands alone in the text. It is as wide as its own text */
.classroom_login_button--join {
  margin-bottom: 15px;
}

.classroom-options .classroom_login_button--option:hover,
.classroom-options .classroom_login_button--option:focus,
.classroom_login_button--join:hover,
.classroom_login_button--join:focus {
  border-color: var(--button-hover-border, var(--cuttle-button-hover-border));
  background: var(--button-hover-background, var(--cuttle-button-hover-background));
}

.classroom-options .classroom_login_button--option:focus-visible,
.classroom_login_button--join:focus-visible {
  outline: 2px solid var(--button-focus-outline, var(--cuttle-button-focus-outline));
  outline-offset: 2px;
}

/* The grid of authentication images */
.auth-images {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.auth-images .auth-image {
  border: 2px solid var(--classroom-image-border, var(--cuttle-classroom-image-border));
  border-radius: 8px;
  background: var(--classroom-image-background, var(--cuttle-classroom-image-background));
  padding: 10px;
  cursor: pointer;
  width: auto;
}

.auth-images .auth-image:hover,
.auth-images .auth-image:focus {
  border-color: var(--classroom-image-hover-border, var(--cuttle-classroom-image-hover-border));
  background: var(--classroom-image-hover-background, var(--cuttle-classroom-image-hover-background));
}

.auth-images .auth-image:focus-visible {
  outline: 2px solid var(--classroom-image-focus-outline, var(--cuttle-classroom-image-focus-outline));
  outline-offset: 2px;
}

/* The image that the student selected and that was not correct */
.auth-images .auth-image--selected {
  border-color: var(--classroom-image-selected-border, var(--cuttle-classroom-image-selected-border));
  background: var(--classroom-image-selected-background, var(--cuttle-classroom-image-selected-background));
}

.auth-images .auth-image img {
  display: block;
  width: 120px;
  height: 120px;
}