@charset "UTF-8";

/** Tri **/

.c-pagination-sort:before {
  background-color: currentColor;
  content: '\\00a0'; /* Espace insécable */
  mask: url('../svg/arrows-up-down-solid-full.svg') no-repeat;
  margin-right: -1em;
}
.c-pagination-sort.asc:before {
  mask: url('../svg/arrow-up-short-wide-solid-full.svg') no-repeat;
}
.c-pagination-sort.desc:before {
  mask: url('../svg/arrow-down-wide-short-solid-full.svg') no-repeat;
}

table .c-pagination-sorted {
  background-color: var(--bulma-link);
}
.c-pagination-sorted a {
  color: var(--bulma-link-invert);
}


/** Icônes **/

.c-icon {
  background-color: currentColor;
  color: inherit;
  display: inline-block;
  height: 1.5em;
  mask-position: center;
  mask-repeat: no-repeat;
  /* mask-size: contain; */
  width: 1.5em;
}
.c-eye {
  mask: url('../svg/eye-regular-full.svg');
}
.c-eye-slash {
  mask: url('../svg/eye-slash-regular-full.svg');
}
.c-eye:hover,
.c-eye-slash:hover {
  color: hsl(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l));
}

.c-vellip {
  mask: url('../svg/ellipsis-vertical-solid-full.svg');
}


/** Bascules **/

/* https://justboil.github.io/bulma-switch-control/ */

.switch input[type="checkbox"]:checked + .check {
  background: var(--c-light-violet-80);
}
.switch:hover input[type="checkbox"]:checked + .check {
  background: var(--c-light-violet-100);
}

/** Radios **/

.b-radio.radio input[type=radio] + .check:before {
  background-color: var(--c-light-violet-100);
}
.b-radio.radio input[type=radio]:checked + .check {
  border-color: var(--c-light-violet-100);
}
.b-radio.radio input[type=radio]:focus:checked + .check {
  box-shadow: 0 0 0.5em var(--c-light-violet-100);
}
.b-radio.radio:hover input[type=radio]:not(:disabled) + .check {
  border-color: var(--c-light-violet-100);
}

/** Compteur **/

.c-character-counter {
  color: var(--c-light-violet-100);
  font-size: calc(var(--bulma-size-normal) * 0.85);
}
.c-character-counter.c-small {
  font-size: var(--bulma-help-size);
}


/** Aide **/

.c-help-disk {
  background-color: var(--c-light-violet-100);
  border-radius: 0.75em;
  color: white;
  display: inline-block;
  font-size: 0.8em;
  margin-left: 0.5em;
  cursor: help;
  text-align: center;
  width: 1.5em;
}


/** Utilitaires **/

.c-preview {
  /* = has-background-light */
  /* background-color: hsl(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l)); */
  /* Même couleur de fond que le thème de HighLightJs. */
  background-color: rgb(246, 246, 246);
  border-radius: var(--bulma-radius-large);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.c-rounded {
  border-radius: var(--bulma-radius-large);
}

.c-transparent {
  background-color: transparent;
}


/** Vue et Alpine */

[v-cloak], [x-cloak] {
  display: none !important;
}

/* https://alpine-ajax.js.org/examples/loading/ */

.c-loading-indicator[aria-busy],
.c-loading-indicator-top[aria-busy] {
  --loading-size: 64px;
  --loading-stroke: 6px;
  --loading-duration: 1s;
  position: relative;
  opacity: .75
}
.c-loading-indicator[aria-busy]:before,
.c-loading-indicator-top[aria-busy]:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--loading-size);
  height: var(--loading-size);
  margin-top: calc(var(--loading-size) / 2 * -1);
  margin-left: calc(var(--loading-size) / 2 * -1);
  border: var(--loading-stroke) solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.5);
  animation: rotate calc(var(--loading-duration)) linear infinite;
}
.c-loading-indicator-top[aria-busy]:before {
  top: var(--loading-size);
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}

/** Transitions des notifications */

.notification.c-transitioned {
  --c-t-duration: 500ms;
  transition-property: all;
  transition-duration: var(--c-t-duration);
  width: max-content; /* Occupe seulement la taille nécessaire, pas la taille du parent. */
}

.c-t-off-screen {
  transform: translateY(-100%);
}
.c-t-down-in {
  animation: var(--c-t-duration) ease bounceInDownNotification;
}
.c-t-right-out {
  animation: var(--c-t-duration) ease-in forwards bounceOutRightNotification;
}
.c-t-fade-scale-out {
  /* cubic-bezier(0.4, 0.0, 0.2, 1) */
  animation: calc(var(--c-t-duration) / 2) ease-out forwards fadeScaleOut;
}

@keyframes bounceInDownNotification {
  60% { transform: translateY(15px); }
  75% { transform: translateY(-10px); }
  90% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

@keyframes bounceOutRightNotification {
  20% { transform: translateX(-20px); }
  100% { transform: translateX(150%); }
}

@keyframes fadeScaleOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.75);
  }
}