/*Badge Wrappers*/
.badges-group {/* Group of badges in a row */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
}

.badge-wrapper { /* Badge with Note */
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  width: fit-content;

  &:has(.badge) {
    .caption, .caption-s, .p-caption {
      border-left: 1px solid var(--light-gray);
      padding-left: 0.5rem;
      white-space: nowrap;
      width: fit-content;
    }
  }
}

p.pending-status {
  border-left: 1px solid var(--light-gray);
  padding-left: 0.5rem;
}

/* Default Badge Styling (Do not change) */
.badge {
  --badge-color: var(--theme-color-darker);

  align-items: center;
  background-color: color-mix(in srgb, var(--badge-color), white 90%);
  border-radius: var(--border-radius);
  color: var(--badge-color);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.25rem;
  height: fit-content;
  line-height: 1rem;
  max-height: 1.5rem;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  width: fit-content;

  svg, svg * {
    --svg-color: var(--badge-color);
    fill: var(--badge-color);
  }

  &:has(p.truncate) {
    white-space: normal;
  }

  p {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1rem;
  }

  &.badge--hidden {
    display: none;

    &.badge--temporary-visible {
      display: inline-flex;
    }
  }

  &.badge-none, &.badge--none {
    --badge-color: var(--ink-gray);
  }

  &.badge-active {
    border: 1px solid var(--theme-color-darker);
    padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
  }

  /*RYAL-4445 to check - using old brand blue for badge notices still*/
  &.badge-notice {
    --badge-color: var(--blue-darker);

    &.badge-active {
      border: 1px solid var(--blue-darker);
    }
  }

  &.badge-success, &.badge--success, &.badge--activated {
    --badge-color: var(--success-dark);

    &.badge-active {
      border: 1px solid var(--success-dark);
    }
  }

  &.badge-alert, &.badge--alert {
    --badge-color: var(--yellow-darker);

    &.badge-active {
      border: 1px solid var(--yellow-darker);
    }
  }

  &.badge-secondary {
    --badge-color: var(--brand-turquoise);
    color: var(--brand-charcoal);

    &.badge-active {
      border: 1px solid var(--brand-turquoise);
    }
  }

  &.badge-warning, &.badge--pending {
    --badge-color: var(--warning-dark);

    &.badge-active {
      border: 1px solid var(--warning-dark);
    }
  }

  &.badge-danger, &.badge--danger, &.badge--deactivated {
    --badge-color: var(--danger-dark);

    &.badge-active {
      border: 1px solid var(--danger-dark);
    }
  }

  /* Organisation Membership Permission Badges */
  &.badge--admin {
    --badge-color: var(--admin-color);
  }

  &.badge--creator {
    --badge-color: var(--creator-color);
  }

  &.badge--publisher {
    --badge-color: var(--publisher-color);
  }

  /* Shift Badges */
  &.badge--open {
    --badge-color: var(--notice-color);
  }

  &.badge--offer, &.badge--open, &.badge--created {
    --badge-color: var(--blue);
  }

  &.badge--booked, &.badge--worked, &.badge--processed, &.badge--paid, &.badge--sent, &.badge--approved {
    --badge-color: var(--success);
  }

  &.badge--pending,  &.badge--requested, &.badge--submitted {
    --badge-color: var(--warning);
  }

  &.badge--cancelled, &.badge--rejected, &.badge--missed, &.badge--disputed {
    --badge-color: var(--danger);
  }

  &.badge--unknown {
    --badge-color: var(--ink-gray);
  }

  &.badge--onboarding {
    --badge-color: var(--ink);

    & > svg * {
      fill: var(--ink);
    }
  }

  &.badge-full {
    justify-content: center;
    width: 100%;
  }

  &.badge-center {
    display: flex;
    margin: 0 auto;
  }

  /* Medium Badge */
  &.badge-m {
    font-size: 0.875rem;
    line-height: 1rem;
    padding: 0.5rem 0.5rem;
  }

  /* Large Badge */
  &.badge-l {
    font-size: 1rem;
    line-height: 2rem;
    padding: 0.25rem 0.5rem;
    max-height: 2rem;
  }

  /* BADGE TYPES */
  &.badge-number {
    background-color: var(--theme-color-darker);
    border-radius: 1rem;
    color: var(--pure-white);
    height: 1rem;
    justify-content: center;
    padding: 0.25rem;
    min-width: 1rem;
    width: fit-content;

    /*RYAL-4445 to check - using old brand blue for badge notices still*/
    &.badge-notice {
      background-color: var(--blue);
    }

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

    &.badge-alert {
      background-color: var(--yellow);
    }

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

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

    &.badge-secondary {
      background-color: var(--secondary-theme-color);
      color: var(--secondary-theme-complementary-color);
    }
  }

  &.permission-badge {
    &:has(.permission-type-admin), &.badge-admin {
      background-color: color-mix(in srgb, var(--admin-color), white 90%);
      border-color: var(--admin-color);
      color: var(--admin-color);

      svg {
        --badge-color: var(--admin-color);
      }
    }

    &:has(.permission-type-creator), &.badge-creator {
      background-color: color-mix(in srgb, var(--creator-color), white 90%);
      border-color: var(--creator-color);
      color: var(--creator-color);

      svg {
        --badge-color: var(--creator-color);
      }
    }

    &:has(.permission-type-publisher), &.badge-publisher {
      background-color: color-mix(in srgb, var(--publisher-color), white 90%);
      border-color: var(--publisher-color);
      color: var(--publisher-color);

      svg {
        --badge-color: var(--publisher-color);
      }
    }
  }

  &.article-badge {
    &.featured, &.pinned {
      background-color: color-mix(in srgb, var(--theme-color), transparent 20%);
      border: 1px solid var(--theme-color-lighter);
      --badge-color: var(--theme-complementary-color);
      padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
    }

    &.draft {
      background-color: color-mix(in srgb, var(--yellow-darker), transparent 80%);
      color: var(--yellow-darker);
    }

    /*RYAL-4445 to check - using old brand blue for scheduled still*/
    &.scheduled {
      background-color: color-mix(in srgb, var(--blue), transparent 80%);
      color: var(--blue);
    }

    &.published {
      background-color: color-mix(in srgb, var(--success), transparent 80%);
      color: var(--success);
    }

    &.expired {
      background-color: color-mix(in srgb, var(--danger-dark), transparent 80%);
      color: var(--danger-dark);
    }

    &.preview {
      background-color: color-mix(in srgb, var(--blue), transparent 80%);
      color: var(--blue);
    }
  }

  &.badge--skeleton {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    display: inline-flex;
    height: 1.5rem;
    width: 80px;
  }
}

.alternating-badge-btns {
  width: 100%;

  .alternating-badge-btns-wrapper {
    width: 100%;
  }

  &:has(.btn-icon) {
    width: fit-content;
  }

  &:has(button) { /* Only toggle when button is present - button is not present if condition is true */
    button { /* At default, button is hidden */
      display: none;
      min-width: unset;
    }

    &:hover { /* On hover, badge is hidden - button is displayed */
      form {
        width: 100%;
      }

      .badge {
        display: none;
      }

      button {
        display: flex;
      }
    }
  }
}

.badge__wrapper {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: fit-content;

  &.badge__wrapper--collapsible {
    flex-wrap: nowrap;
    overflow: clip;
    width: 100%;

    &.badge__wrapper--expanded {
      flex-wrap: wrap;
    }

    .badge.badge__collapsed-btn {
      cursor: pointer;
    }
  }
}

.badge:has(.assignment-dropdown) {
  &:hover .assignment-dropdown .ss-main, .assignment-dropdown:hover .ss-main, .assignment-dropdown .ss-main.ss-open-below {
    --color: var(--pure-white);
  }
}

.badge-with-label, .badge-with-form {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.badge-with-form {
  width: 100%;
}

article.attributes__item .attributes__body:has(> .badge + .badge-with-label) .badge-with-label {
  border-left: 1px solid var(--mid-gray);
  padding-left: 0.5rem;
  margin-left: 0.5rem;
}

.division-badge {
  --badge-status: var(--theme-color-darker);

  align-items: center;
  background-color: color-mix(in srgb, var(--badge-status), white 90%);
  border-radius: var(--border-radius);
  display: inline-flex;
  height: var(--badge-size);
  justify-content: center;
  min-width: var(--badge-size);
  max-width: var(--badge-size);
  transition: 0.4s ease-in-out;

  svg {
    fill: var(--badge-status);
    min-width: var(--icon-size);
    width: var(--icon-size);
  }

  &.division-badge--organisation {
    --badge-size: 64px;
    --icon-size: 32px;
  }

  &.division-badge--site {
    --badge-size: 48px;
    --icon-size: 24px;
  }

  &.division-badge--department {
    --badge-size: 40px;
    --icon-size: 16px;
  }

  &.division-badge--onboarding {
    --badge-status: var(--ink);
  }

  &.division-badge--activated {
    --badge-status: var(--success-dark);
  }

  &.division-badge--pending {
    --badge-status: var(--warning-dark);
  }

  &.division-badge--deactivated {
    --badge-status: var(--danger-dark);
  }

  &.division-badge--none {
    --badge-status: var(--ink-gray);
  }
}

.status-indicator {
  --status-color: var(--theme-color);
  --size: 0.5rem;

  background-color: var(--status-color);
  display: block;
  border-radius: var(--size);
  height: var(--size);
  width: var(--size);

  &.status-indicator--activated {
    --status-color: var(--success);
  }

  &.status-indicator--pending {
    --status-color: var(--warning);
  }

  &.status-indicator--deactivated {
    --status-color: var(--danger);
  }
}