@use "sass:list";
@use "../utils/variables";

/*=====================
 Badge css start
==========================*/

$background-name: primary,
secondary,
success,
danger,
info,
light,
dark,
warning;
$background-color: var(--primary-color),
variables.$secondary-color,
variables.$success-color,
variables.$danger-color,
variables.$info-color,
variables.$light-color,
variables.$dark-color,
variables.$warning-color;

@each $var in $background-name {
  $i: list.index($background-name, $var);

  .badge-version-#{$var} {
    background-color: rgba(list.nth($background-color, $i), 0.1) !important;
    color: list.nth($background-color, $i);
    border: 1px solid list.nth($background-color, $i);
  }
}

.badge-version-primary {
  background-color: transparent !important;
  position: relative;
  z-index: 0;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0.1;
  }
}

/* Badges */
[class*="badge-version-"] {
  &.badge {
    border-radius: 0.3125rem;
    padding: 5px 10px;
    display: inline-block;
    width: max-content;
    height: auto;
    font-weight: bold;
    letter-spacing: 0.75px;
    line-height: 1.1;
  }
}

/* payment status badges */
$background-name: paid,
pending,
completed,
failed,
notPaid,
requested,
scheduled,
accepted,
rejected,
arrived,
started,
cancelled;
$background-color: variables.$primary-color,
variables.$warning-color,
variables.$primary-color,
variables.$danger-color,
variables.$warning-color,
variables.$requested-color,
variables.$scheduled-color,
variables.$accepted-color,
variables.$rejected-color,
variables.$arrived-color,
variables.$started-color,
variables.$cancelled-color;

@each $var in $background-name {
  $i: list.index($background-name, $var);

  .badge-#{$var} {
    background-color: list.nth($background-color, $i) !important;
    color: variables.$white;
    border: 1px solid list.nth($background-color, $i);
  }
}

/* ride status badges */
$background-name: completed,
active,
cancel highlight,
accent,
positive,
negative,
attention,
progress,
critical,
calm,
tertairy;
$background-color: variables.$primary-color,
variables.$warning-color,
variables.$secondary-color variables.$highlight-color,
variables.$accent-color,
variables.$positive-color,
variables.$negative-color,
variables.$attention-color,
variables.$progress-color,
variables.$critical-color,
variables.$calm-color,
variables.$tertiary-color;

@each $var in $background-name {
  $i: list.index($background-name, $var);

  .badge-#{$var} {
    background-color: list.nth($background-color, $i) !important;
    color: variables.$white;
    border: 1px solid list.nth($background-color, $i);
  }
}