/* ---------------------------------------------- Couleurs ajoutées via javascript

/* Sortable (jQuery UI) */

.sortable-area {
  border: 1px dashed currentColor;
  background-color: var(--main-menu-background);
}

div.ui-sortable-handle {
  border: 1px dashed currentColor !important;
  border-radius: 0.75em !important;

  #dashboard-main & {
    padding: 1em !important;
    margin-bottom: 1em !important;
    background: var(--ui-sortable-background) !important;
    .ui-sortable-handle {
      background: var(--ui-sortable-background-bis) !important;
      .ui-sortable-handle {
        background: var(--ui-sortable-background-ter) !important;
      }
    }
    &:hover {
      cursor: move;
    }
  }
}

/* Badges (common.js) */

.badgeable {
  /* class to set to badge parent's, not mandatory for menu items */
  position: relative;
}

/* Badge design */

.badge {
  font-size: smaller;
  color: var(--badge-color);
  background-color: var(--badge-std-background);
  border: 1px solid var(--badge-border);
  vertical-align: top;
  border-radius: 0.25em;
  padding: 0.1em 0.6em 0;
}

.badge-icon {
  background-color: var(--badge-soft-background);
}

/* Badge background override */

.badge-std {
  background-color: var(--badge-std-background);
}

.badge-info {
  background-color: var(--badge-info-background);
}

.badge-soft {
  background-color: var(--badge-soft-background);
}

/* Badge position */

.badge-block {
  /* Dashboard module → badge on top right */
  position: absolute;
  top: -10px;
  right: -10px;
}

.badge-icon {
  /* Dashboard icon → badge on top right */
  right: 2.4em;
}

@media screen and (max-width: $mobile-screen) {
  .badge-block {
    right: -5px;
  }
  .badge-icon {
    top: 5px;
  }
}

.badge-inline {
  /* Menu item */
  margin-left: 0.5em;
  font-size: 0.75em;
  height: fit-content;
  width: fit-content;
}

.badge-left {
  right: auto;
  left: -10px;

  &.badge-icon {
    left: 20px;
  }
}

/* Badge design option */

.badge-noborder {
  border: none;
}

.badge-small {
  font-size: smaller;

  &.badge-icon {
    right: 25px;

    &.badge-left {
      right: auto;
      left: 25px;
    }
  }
}

.badge-square {
  border-radius: 0;
}
