/* EPFL theme for Indico -- buttons.

   Elements' button scale (elements.min.css):
     .btn           { padding:.68rem 1.4rem; font-size:1rem; line-height:1.5;
                      border-radius:2px; font-weight:400; color:#212121 }
     .btn-primary   { color:#fff; background-color:red; border-color:red }
     .btn-primary:hover  { background-color:#d90000; border-color:#c00 }
     .btn-primary:active  { background:#891818; border-color:#891818 }
     .btn-secondary { color:#212121; background-color:#fff; border-color:#fff }
     .btn-secondary:hover { background-color:#ececec; border-color:#e6e6e6 }
     .btn-outline-primary { color:red; border-color:red }
     .btn-outline-primary:hover { color:#fff; background-color:red }

   Indico's own base is `.i-button{border-radius:2px; padding:4px 10px;
   color:#777}` -- the radius already matches EPFL, so what changes here is
   colour, weight and (moderately) padding.

   On padding: Elements' .68rem/1.4rem is sized for content pages with a few
   buttons. Indico packs them into toolbars, button groups and table rows, and
   adopting that figure wholesale overflows those containers. Padding is
   therefore raised toward EPFL (4px/10px -> 6px/14px) only for standalone
   buttons, and left alone where Indico has grouped or icon-only buttons whose
   geometry is load-bearing. Everything else -- the palette, the 2px corners,
   the typeface -- is EPFL's exactly.

   The :not(.label):not(.borderless):not(.text-color) chain mirrors Indico's
   own modifier guards so borderless/label variants keep their flat look. */

.i-button,
.action-button,
button,
input[type='submit'],
input[type='button'] {
  font-family: 'SuisseIntl', Arial, sans-serif;
  border-radius: var(--epfl-radius);
}

/* Default (neutral) button: EPFL reads this as .btn-secondary -- white,
   black label, grey hover -- in place of Indico's grey-on-grey gradient. */
.i-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning),
.action-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning) {
  background: var(--epfl-white);
  background-image: none;
  border-color: var(--epfl-gray-300);
  color: var(--epfl-black);
  font-weight: 400;
  text-shadow: none;
  box-shadow: none;
}

.i-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning):hover,
.action-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning):hover {
  background: var(--epfl-gray-100);
  background-image: none;
  border-color: var(--epfl-gray-200);
  color: var(--epfl-black);
}

.i-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning):active,
.i-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning).open,
.action-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.accept):not(.danger):not(.warning):active {
  background: var(--epfl-gray-200);
  background-image: none;
  border-color: var(--epfl-gray-300);
}

/* Primary action == .btn-primary: EPFL red, white label, bold. */
.i-button.highlight:not(.label):not(.borderless):not(.text-color),
.action-button:not(.label):not(.borderless):not(.text-color),
button.highlight:not(.label):not(.borderless):not(.text-color) {
  background: var(--epfl-red);
  background-image: none;
  border-color: var(--epfl-red);
  color: var(--epfl-white);
  font-weight: 700;
  text-shadow: none;
}

.i-button.highlight:not(.label):not(.borderless):not(.text-color):hover,
.action-button:not(.label):not(.borderless):not(.text-color):hover,
button.highlight:not(.label):not(.borderless):not(.text-color):hover {
  background: var(--epfl-red-hover);
  background-image: none;
  border-color: var(--epfl-red-border);
  color: var(--epfl-white);
}

.i-button.highlight:not(.label):not(.borderless):not(.text-color):active,
.i-button.highlight:not(.label):not(.borderless):not(.text-color).open,
.action-button:not(.label):not(.borderless):not(.text-color):active {
  background: var(--epfl-red-active);
  background-image: none;
  border-color: var(--epfl-red-active);
}

/* Semantic variants. EPFL has no green/amber button in Elements, so these
   keep Indico's semantics using EPFL's secondary palette. */
.i-button.accept:not(.label):not(.borderless):not(.text-color) {
  background: var(--epfl-green-text);
  background-image: none;
  border-color: var(--epfl-green-text);
  color: var(--epfl-white);
  font-weight: 700;
}

.i-button.accept:not(.label):not(.borderless):not(.text-color):hover {
  background: #3b6211;
  background-image: none;
  border-color: #3b6211;
}

.i-button.danger:not(.label):not(.borderless):not(.text-color) {
  background: var(--epfl-red-dark);
  background-image: none;
  border-color: var(--epfl-red-dark);
  color: var(--epfl-white);
  font-weight: 700;
}

.i-button.danger:not(.label):not(.borderless):not(.text-color):hover {
  background: var(--epfl-red-active);
  background-image: none;
  border-color: var(--epfl-red-active);
}

.i-button.warning:not(.label):not(.borderless):not(.text-color) {
  background: var(--epfl-orange);
  background-image: none;
  border-color: var(--epfl-orange);
  color: var(--epfl-black);
  font-weight: 700;
}

/* Roomier hit area, EPFL-ward, but only for buttons Indico has not put in
   a group / toolbar / table cell and that carry a text label. */
.i-button:not(.label):not(.borderless):not(.icon-only):not(.arrow):not(.color-button),
.action-button:not(.label):not(.borderless):not(.icon-only) {
  padding: 6px 14px;
}

.toolbar .i-button,
.group .i-button,
.i-buttons-group .i-button,
td .i-button,
th .i-button,
.i-button.arrow,
.i-button.icon-only,
.i-button.color-button {
  padding: 4px 10px;
}

/* Borderless/label variants: EPFL black rather than Indico's #777. */
.i-button.borderless:not(.accept):not(.danger):not(.warning):not(.highlight),
.borderless.action-button {
  color: var(--epfl-black) !important;
}

.i-button.borderless:not(.accept):not(.danger):not(.warning):not(.highlight):hover {
  color: var(--epfl-red) !important;
}

/* Focus ring: Elements uses a soft red halo
   (.btn-primary:active:focus{box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}). */
.i-button:focus-visible,
.action-button:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 38, 38, 0.5);
}

/* Tags/badges use EPFL's canard rather than Indico's blue. */
span.badge,
.i-tag {
  background: var(--epfl-canard);
  border-color: var(--epfl-canard-dark);
  border-radius: var(--epfl-radius);
}