/**
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; under version 2
 * of the License (non-upgradable).
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 *
 * Copyright (c) 2022 Open Assessment Technologies SA ;
 */
/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.buttonlist-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  padding: 0;
  /****** base styles *******/
  /****** step state styles *******/
  /* disabling is applied at buttonlist-item or buttonlist-items level */
  /****** keyboard focus styles *******/
}
.buttonlist-items .buttonlist-item {
  height: 6.25rem;
  width: 6.25rem;
  display: flex;
  justify-content: center; /* aligning left - cut focusing board for keyboard interacting */
  align-items: center;
  /* reset parent styles */
  padding: 0;
  border: none;
}
.buttonlist-items .buttonlist-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 4rem;
  border-style: solid;
  border-radius: 50%;
  border-width: 0.125rem;
  border-color: hsl(0, 0%, 45%);
  margin: 1.3rem 0.75rem 1rem 0.75rem;
  padding: 0; /*Fixes firefox button jumps*/
  font-weight: bold;
  font-size: 1.6rem;
  background-color: rgb(255, 255, 255);
  color: hsl(0, 0%, 45%);
  text-shadow: none;
  cursor: pointer;
}
.buttonlist-items .buttonlist-label {
  font-family: "Nunito Sans", "Source Sans Pro", Arial, sans-serif;
  max-width: 3.75rem;
  overflow: hidden;
  white-space: nowrap;
  line-height: initial;
}
.buttonlist-items .buttonlist-icon {
  padding: 0;
  top: 0;
  left: 0;
}
.buttonlist-items .buttonlist-icon:not([class*=icon-]) {
  display: none;
}
.buttonlist-items .buttonlist-icon[class*=icon-] ~ .buttonlist-label {
  display: none;
}
.buttonlist-items .indicator {
  display: none;
}
.buttonlist-items .buttonlist-score-badge {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  color: rgb(255, 255, 255);
  border: 0.1rem solid rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttonlist-items .buttonlist-score-icon {
  font-size: 1.2rem;
  padding: 0;
  top: 0;
  left: 0;
}
.buttonlist-items .icon-info::before {
  content: "\e923";
}
.buttonlist-items .icon-flagged::before {
  content: "\e921";
}
.buttonlist-items .icon-correct::before {
  content: "\e69f";
}
.buttonlist-items .icon-incorrect::before {
  content: "\e69e";
}
.buttonlist-items .icon-score-pending::before {
  content: "\e633";
}
.buttonlist-items .icon-score-partial::before {
  content: "\e91a";
}
.buttonlist-items .buttonlist-item {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.buttonlist-items .buttonlist-item.viewed .buttonlist-btn {
  border-width: 0.25rem;
  color: hsl(0, 0%, 12%);
  border-color: hsl(0, 0%, 12%);
}
.buttonlist-items .buttonlist-item.answered .buttonlist-btn {
  border-width: 0.25rem;
  background-color: hsl(0, 0%, 12%);
  color: rgb(255, 255, 255);
  border-color: hsl(0, 0%, 12%);
}
.buttonlist-items .buttonlist-item.buttonlist-item-active .indicator {
  position: absolute;
  display: block;
  z-index: 1;
  color: hsl(0, 0%, 12%);
  height: 1.4rem;
  min-width: 1.6rem;
  top: unset;
  bottom: -1.7rem;
  padding: 0;
  /* centering horizontally */
  left: 50%;
  transform: translateX(-50%);
}
.buttonlist-items .buttonlist-item.correct .buttonlist-score-badge {
  background-color: rgb(14, 145, 75);
}
.buttonlist-items .buttonlist-item.incorrect .buttonlist-score-badge {
  background-color: rgb(186, 18, 43);
}
.buttonlist-items .buttonlist-item.score-pending .buttonlist-score-badge {
  background-color: #6E6E6E;
}
.buttonlist-items .buttonlist-item.score-partial .buttonlist-score-badge {
  background-color: #AD5700;
}
.buttonlist-items:not(.disabled) .buttonlist-item:not(.disabled) .buttonlist-btn:hover {
  background-color: hsl(208, 100%, 95%);
  color: hsl(208, 100%, 32%);
  border-color: hsl(208, 100%, 32%);
}
.buttonlist-items.disabled,
.buttonlist-items .buttonlist-item.disabled {
  /* reset global styles */
  background-color: unset !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.buttonlist-items.disabled .buttonlist-btn,
.buttonlist-items .buttonlist-item.disabled .buttonlist-btn {
  cursor: not-allowed;
  /* reset global styles */
  text-shadow: none;
}
.buttonlist-items .buttonlist-item.key-navigation-highlight .buttonlist-btn::before,
.buttonlist-items .buttonlist-item .buttonlist-btn.buttonlist-btn-focus:focus::before {
  content: "";
  display: block;
  position: absolute;
  width: 5.2rem;
  height: 5.2rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-width: 0.25rem;
  border-color: hsl(208, 100%, 32%);
  border-style: dotted;
  border-radius: 50%;
}
.buttonlist-items .buttonlist-item.key-navigation-highlight.buttonlist-item-active .buttonlist-btn .indicator, .buttonlist-items .buttonlist-item.buttonlist-item-active .buttonlist-btn.buttonlist-btn-focus:focus .indicator, .buttonlist-items .buttonlist-item.buttonlist-item-active .buttonlist-btn:focus-visible .indicator {
  color: hsl(208, 100%, 32%);
}
.buttonlist-items .buttonlist-item.key-navigation-highlight.viewed .buttonlist-btn, .buttonlist-items .buttonlist-item.viewed .buttonlist-btn.buttonlist-btn-focus:focus {
  background-color: rgb(255, 255, 255);
  color: hsl(208, 100%, 32%);
  border-color: hsl(208, 100%, 32%);
}
.buttonlist-items .buttonlist-item.key-navigation-highlight.answered .buttonlist-btn, .buttonlist-items .buttonlist-item.answered .buttonlist-btn.buttonlist-btn-focus:focus {
  background-color: hsl(208, 100%, 32%);
  color: rgb(255, 255, 255);
  border-color: hsl(208, 100%, 32%);
}
/*# sourceMappingURL=item-button-list.css.map */