 /** Component: Feature Badges (alpha, beta) */

.badge {
  --custom-badge-background-color: var(--strapi-neutral-200);
  --custom-badge-color: var(--strapi-neutral-800);
  --custom-badge-font-size: var(--strapi-font-size-sm);

  --custom-selection-background-color: var(--custom-badge-color);

  --ifm-badge-background-color: var(--custom-badge-background-color);
  --ifm-badge-color: var(--custom-badge-color);
  --ifm-badge-border-radius: var(--strapi-spacing-1);
  --ifm-badge-padding-horizontal: var(--strapi-spacing-2);
  --ifm-badge-padding-vertical: var(--strapi-spacing-2);

  --ifm-font-weight-bold: var(--strapi-font-size-sm);
  --ifm-link-color: var(--ifm-badge-color);
  --ifm-link-hover-color: var(--ifm-badge-color);

  position: relative;
  top: var(--custom-badge-inside-titles-top);
  font-size: var(--custom-badge-font-size);
  font-weight: 400;
  letter-spacing: 0.3px;
  text-align: center;

  &-link {
    font-weight: 400;
  }

  &--alpha {
    --custom-badge-background-color: rgb(255,230,228);
    --custom-badge-color: rgb(219, 0, 22);
  }

  &--beta {
    --custom-badge-background-color: rgb(246, 228, 253);
    --custom-badge-color: rgb(160,25,240);
  }

  &--future {
    --custom-badge-background-color: var(--strapi-danger-200);
    --custom-badge-color: rgb(219, 0, 22);
  }

  &--enterprise {
    --custom-badge-background-color: rgb(255, 241, 209);
    --custom-badge-color: rgb(229, 136, 41);
  }

  &--strapicloudpro {
    --custom-badge-background-color: rgb(55, 34, 254);
    --custom-badge-color: #fff;
  }

  &--strapicloudteam {
    --custom-badge-background-color: rgb(154, 53, 242);
    --custom-badge-color: #fff;
  }
  &--strapiclouddev {
    --custom-badge-background-color: rgb(44,170,73);
    --custom-badge-color: #fff;
  }

  &--new {
    --custom-badge-background-color: var(--strapi-warning-100);
    --custom-badge-border-color: var(--strapi-warning-200);
    --custom-badge-color: var(--strapi-warning-700);

    --ifm-badge-padding-horizontal: 2px;
    --ifm-badge-padding-vertical: 2px;

    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    min-width: 52px;
    border: 1px solid var(--custom-badge-border-color);
  }


  &--updated {
    --custom-badge-background-color: var(--strapi-secondary-100);
    --custom-badge-border-color: var(--strapi-secondary-200);
    --custom-badge-color: var(--strapi-secondary-600);

    --ifm-badge-padding-horizontal: 2px;
    --ifm-badge-padding-vertical: 2px;

    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    min-width: 52px;
    border: 1px solid var(--custom-badge-border-color);
    flex-shrink: 0;
  }
}

h1 .badge {
  --custom-badge-inside-titles-top: -.4em;
}

h2 .badge {
  --custom-badge-inside-titles-top: -.3em;
}

/** Dark mode */
@include dark {
  .badge {
    &--new {
      --custom-badge-background-color: var(--strapi-neutral-100);
      --custom-badge-border-color: var(--strapi-warning-500);
      --custom-badge-color: var(--strapi-warning-500);
    }
    &--updated {
      --custom-badge-background-color: var(--strapi-neutral-100);
      --custom-badge-border-color: var(--strapi-secondary-500);
      --custom-badge-color: var(--strapi-secondary-500);
    }
  }
}
