.dry-badge {
  // TODO: codify in theme
  $dry-badge-transition: color 0.2s ease, background-color 0.2s ease;

  display: flex;
  width: fit-content;
  flex-direction: row;
  align-items: center;
  border-radius: 16px;
  box-sizing: border-box;
  transition: $dry-badge-transition;

  /*
  Size
  */

  /* Default */
  &--sm {
    min-height: 22px;
    padding: 2px 8px;

    &__content {
      font-size: 12px;
      font-size: 12px;
      line-height: 18px;
    }
  }

  &--md {
    min-height: 24px;
    padding: 2px 10px;

    &__content {
      font-size: 14px;
    }
  }

  &--lg {
    min-height: 28px;
    padding: 4px 12px;

    &__content {
      font-size: 14px;
    }
  }

  /*
  Color
  
  Badge colors are an edge-case where we actually want the 
  same behavior for both light and dark themes, so that
  users can continue to make the same associations with
  the colors they've come to expect--regardless of theme.
  */

  &--primary {
    color: var(--primary-700);
    background-color: var(--primary-100);

    .dark & {
      color: var(--primary-100);
      background-color: var(--primary-700);
    }
  }

  &--error {
    color: var(--error-700);
    background-color: var(--error-100);

    .dark & {
      color: var(--error-100);
      background-color: var(--error-700);
    }
  }

  &--warning {
    color: var(--warning-700);
    background-color: var(--warning-100);

    .dark & {
      color: var(--warning-100);
      background-color: var(--warning-700);
    }
  }

  &--success {
    color: var(--success-700);
    background-color: var(--success-100);

    .dark & {
      color: var(--success-100);
      background-color: var(--success-700);
    }
  }

  &--gray {
    color: var(--gray-700);
    background-color: var(--gray-100);

    .dark & {
      color: var(--gray-100);
      background-color: var(--gray-700);
    }
  }

  &--grayBlue {
    color: var(--gray-blue-700);
    background-color: var(--grayBlue-100);

    .dark & {
      color: var(--grayBlue-100);
      background-color: var(--grayBlue-700);
    }
  }

  &--grayCool {
    color: var(--grayCool-700);
    background-color: var(--grayCool-100);

    .dark & {
      color: var(--grayCool-100);
      transition: $dry-badge-transition;
      background-color: var(--grayCool-700);
    }
  }

  &--grayModern {
    color: var(--grayModern-700);
    background-color: var(--grayModern-100);

    .dark & {
      color: var(--grayModern-100);
      background-color: var(--grayModern-700);
    }
  }

  &--grayNeutral {
    color: var(--grayNeutral-700);
    background-color: var(--grayNeutral-100);

    .dark & {
      color: var(--grayNeutral-100);
      background-color: var(--grayNeutral-700);
    }
  }

  &--grayIron {
    color: var(--grayIron-700);
    background-color: var(--grayIron-100);

    .dark & {
      color: var(--grayIron-100);
      background-color: var(--grayIron-700);
    }
  }

  &--grayTrue {
    color: var(--graTrue-700);
    background-color: var(--grayTrue-100);

    .dark & {
      color: var(--grayTrue-100);
      background-color: var(--grayTrue-700);
    }
  }

  &--grayWarm {
    color: var(--grayWarm-700);
    background-color: var(--grayWarm-100);

    .dark & {
      color: var(--grayWarm-100);
      background-color: var(--grayWarm-700);
    }
  }

  &--moss {
    color: var(--moss-700);
    background-color: var(--moss-100);

    .dark & {
      color: var(--moss-100);
      background-color: var(--moss-700);
    }
  }

  &--greenLight {
    color: var(--greenLight-700);
    background-color: var(--greenLight-100);

    .dark & {
      color: var(--greenLight-100);
      background-color: var(--greenLight-700);
    }
  }

  &--green {
    color: var(--green-700);
    background-color: var(--green-100);

    .dark & {
      color: var(--green-100);
      background-color: var(--green-700);
    }
  }

  &--teal {
    color: var(--teal-700);
    background-color: var(--teal-100);

    .dark & {
      color: var(--teal-100);
      background-color: var(--teal-700);
    }
  }

  &--cyan {
    color: var(--cyan-700);
    background-color: var(--cyan-100);

    .dark & {
      color: var(--cyan-100);
      background-color: var(--cyan-700);
    }
  }

  &--blueLight {
    color: var(--blueLight-700);
    background-color: var(--blueLight-100);

    .dark & {
      color: var(--blueLight-100);
      background-color: var(--blueLight-700);
    }
  }

  &--blue {
    color: var(--blue-700);
    background-color: var(--blue-100);

    .dark & {
      color: var(--blue-100);
      background-color: var(--blue-700);
    }
  }

  &--blueDark {
    color: var(--blueDark-700);
    background-color: var(--blueDark-100);

    .dark & {
      color: var(--blueDark-100);
      background-color: var(--blueDark-700);
    }
  }

  &--indigo {
    color: var(--indigo-700);
    background-color: var(--indigo-100);

    .dark & {
      color: var(--indigo-100);
      background-color: var(--indigo-700);
    }
  }

  &--violet {
    color: var(--violet-700);
    background-color: var(--violet-100);

    .dark & {
      color: var(--violet-100);
      background-color: var(--violet-700);
    }
  }

  &--purple {
    color: var(--purple-700);
    background-color: var(--purple-100);

    .dark & {
      color: var(--purple-100);
      background-color: var(--purple-700);
    }
  }

  &--fuchsia {
    color: var(--fuchsia-700);
    background-color: var(--fuchsia-100);

    .dark & {
      color: var(--fuchsia-100);
      background-color: var(--fuchsia-700);
    }
  }

  &--pink {
    color: var(--pink-700);
    background-color: var(--pink-100);

    .dark & {
      color: var(--pink-100);
      background-color: var(--pink-700);
    }
  }

  &--rose {
    color: var(--rose-700);
    background-color: var(--rose-100);

    .dark & {
      color: var(--rose-100);
      background-color: var(--rose-700);
    }
  }

  &--orangeDark {
    color: var(--orangeDark-700);
    background-color: var(--orangeDark-100);

    .dark & {
      color: var(--orangeDark-100);
      background-color: var(--orangeDark-700);
    }
  }

  &--orange {
    color: var(--orange-700);
    background-color: var(--orange-100);

    .dark & {
      color: var(--orange-100);
      background-color: var(--orange-700);
    }
  }

  &--yellow {
    color: var(--yellow-700);
    background-color: var(--yellow-100);

    .dark & {
      color: var(--yellow-100);
      background-color: var(--yellow-700);
    }
  }
}

/* 
  Variants

  "Medium" variant is the default and does not need to be
  explicitly declared.
*/

/* Light */

.dry-badge--primary.dry-badge--light {
  color: var(--primary-700);
  background-color: var(--background);

  .dark & {
    color: var(--primary-700);
  }
}

.dry-badge--error.dry-badge--light {
  color: var(--error-700);
  background-color: var(--background);

  .dark & {
    color: var(--error-700);
  }
}

.dry-badge--warning.dry-badge--light {
  color: var(--warning-700);
  background-color: var(--background);

  .dark & {
    color: var(--warning-700);
  }
}

.dry-badge--success.dry-badge--light {
  color: var(--success-700);
  background-color: var(--background);

  .dark & {
    color: var(--success-700);
  }
}

.dry-badge--success.dry-badge--light {
  color: var(--success-700);
  background-color: var(--background);

  .dark & {
    color: var(--success-700);
  }
}

.dry-badge--gray.dry-badge--light {
  color: var(--gray-700);
  background-color: var(--background);

  .dark & {
    color: var(--gray-700);
  }
}

.dry-badge--grayBlue.dry-badge--light {
  color: var(--grayBlue-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayBlue-700);
  }
}

.dry-badge--grayCool.dry-badge--light {
  color: var(--grayCool-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayCool-700);
  }
}

.dry-badge--grayModern.dry-badge--light {
  color: var(--grayModern-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayModern-700);
  }
}

.dry-badge--grayNeutral.dry-badge--light {
  color: var(--grayNeutral-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayNeutral-700);
  }
}

.dry-badge--grayIron.dry-badge--light {
  color: var(--grayIron-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayIron-700);
  }
}

.dry-badge--grayTrue.dry-badge--light {
  color: var(--grayTrue-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayTrue-700);
  }
}

.dry-badge--grayWarm.dry-badge--light {
  color: var(--grayWarm-700);
  background-color: var(--background);

  .dark & {
    color: var(--grayWarm-700);
  }
}

.dry-badge--moss.dry-badge--light {
  color: var(--moss-700);
  background-color: var(--background);

  .dark & {
    color: var(--moss-700);
  }
}

.dry-badge--greenLight.dry-badge--light {
  color: var(--greenLight-700);
  background-color: var(--background);

  .dark & {
    color: var(--greenLight-700);
  }
}

.dry-badge--green.dry-badge--light {
  color: var(--green-700);
  background-color: var(--background);

  .dark & {
    color: var(--green-700);
  }
}

.dry-badge--teal.dry-badge--light {
  color: var(--teal-700);
  background-color: var(--background);

  .dark & {
    color: var(--teal-700);
  }
}

.dry-badge--cyan.dry-badge--light {
  color: var(--cyan-700);
  background-color: var(--background);

  .dark & {
    color: var(--cyan-700);
  }
}

.dry-badge--blueLight.dry-badge--light {
  color: var(--blueLight-700);
  background-color: var(--background);

  .dark & {
    color: var(--blueLight-700);
  }
}

.dry-badge--blue.dry-badge--light {
  color: var(--blue-700);
  background-color: var(--background);

  .dark & {
    color: var(--blue-700);
  }
}

.dry-badge--blueDark.dry-badge--light {
  color: var(--blueDark-700);
  background-color: var(--background);

  .dark & {
    color: var(--blueDark-700);
  }
}

.dry-badge--indigo.dry-badge--light {
  color: var(--indigo-700);
  background-color: var(--background);

  .dark & {
    color: var(--indigo-700);
  }
}

.dry-badge--violet.dry-badge--light {
  color: var(--violet-700);
  background-color: var(--background);

  .dark & {
    color: var(--violet-700);
  }
}

.dry-badge--purple.dry-badge--light {
  color: var(--purple-700);
  background-color: var(--background);

  .dark & {
    color: var(--purple-700);
  }
}

.dry-badge--fuchsia.dry-badge--light {
  color: var(--fuchsia-700);
  background-color: var(--background);

  .dark & {
    color: var(--fuchsia-700);
  }
}

.dry-badge--pink.dry-badge--light {
  color: var(--pink-700);
  background-color: var(--background);

  .dark & {
    color: var(--pink-700);
  }
}

.dry-badge--rose.dry-badge--light {
  color: var(--rose-700);
  background-color: var(--background);

  .dark & {
    color: var(--rose-700);
  }
}

.dry-badge--orangeDark.dry-badge--light {
  color: var(--orangeDark-700);
  background-color: var(--background);

  .dark & {
    color: var(--orangeDark-700);
  }
}

.dry-badge--orange.dry-badge--light {
  color: var(--orange-700);
  background-color: var(--background);

  .dark & {
    color: var(--orange-700);
  }
}

.dry-badge--yellow.dry-badge--light {
  color: var(--yellow-700);
  background-color: var(--background);

  .dark & {
    color: var(--yellow-700);
  }
}

/* Dark */

.dry-badge--primary.dry-badge--dark {
  color: var(--background);
  background-color: var(--primary-600);

  .dark & {
    background-color: var(--primary-300);
  }
}

.dry-badge--error.dry-badge--dark {
  color: var(--background);
  background-color: var(--error-600);

  .dark & {
    background-color: var(--error-300);
  }
}

.dry-badge--warning.dry-badge--dark {
  color: var(--background);
  background-color: var(--warning-600);

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

.dry-badge--success.dry-badge--dark {
  color: var(--background);
  background-color: var(--success-600);

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

.dry-badge--gray.dry-badge--dark {
  color: var(--background);
  background-color: var(--gray-600);

  .dark & {
    background-color: var(--gray-300);
  }
}

.dry-badge--grayBlue.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayBlue-600);

  .dark & {
    background-color: var(--grayBlue-300);
  }
}

.dry-badge--grayCool.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayCool-600);

  .dark & {
    background-color: var(--grayCool-300);
  }
}

.dry-badge--grayModern.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayModern-600);

  .dark & {
    background-color: var(--grayModern-300);
  }
}

.dry-badge--grayNeutral.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayNeutral-600);

  .dark & {
    background-color: var(--grayNeutral-300);
  }
}

.dry-badge--grayIron.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayIron-600);

  .dark & {
    background-color: var(--grayIron-300);
  }
}

.dry-badge--grayTrue.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayTrue-600);

  .dark & {
    background-color: var(--grayTrue-300);
  }
}

.dry-badge--grayWarm.dry-badge--dark {
  color: var(--background);
  background-color: var(--grayWarm-600);

  .dark & {
    background-color: var(--grayWarm-300);
  }
}

.dry-badge--moss.dry-badge--dark {
  color: var(--background);
  background-color: var(--moss-600);

  .dark & {
    background-color: var(--moss-300);
  }
}

.dry-badge--greenLight.dry-badge--dark {
  color: var(--background);
  background-color: var(--greenLight-600);

  .dark & {
    background-color: var(--greenLight-300);
  }
}

.dry-badge--green.dry-badge--dark {
  color: var(--background);
  background-color: var(--green-600);

  .dark & {
    background-color: var(--green-300);
  }
}

.dry-badge--teal.dry-badge--dark {
  color: var(--background);
  background-color: var(--teal-600);

  .dark & {
    background-color: var(--teal-300);
  }
}

.dry-badge--cyan.dry-badge--dark {
  color: var(--background);
  background-color: var(--cyan-600);

  .dark & {
    background-color: var(--cyan-300);
  }
}

.dry-badge--blueLight.dry-badge--dark {
  color: var(--background);
  background-color: var(--blueLight-600);

  .dark & {
    background-color: var(--blueLight-300);
  }
}

.dry-badge--blue.dry-badge--dark {
  color: var(--background);
  background-color: var(--blue-600);

  .dark & {
    background-color: var(--blue-300);
  }
}

.dry-badge--blueDark.dry-badge--dark {
  color: var(--background);
  background-color: var(--blueDark-600);

  .dark & {
    background-color: var(--blueDark-300);
  }
}

.dry-badge--indigo.dry-badge--dark {
  color: var(--background);
  background-color: var(--indigo-600);

  .dark & {
    background-color: var(--indigo-300);
  }
}

.dry-badge--violet.dry-badge--dark {
  color: var(--background);
  background-color: var(--violet-600);

  .dark & {
    background-color: var(--violet-300);
  }
}

.dry-badge--purple.dry-badge--dark {
  color: var(--background);
  background-color: var(--purple-600);

  .dark & {
    background-color: var(--purple-300);
  }
}

.dry-badge--fuchsia.dry-badge--dark {
  color: var(--background);
  background-color: var(--fuchsia-600);

  .dark & {
    background-color: var(--fuchsia-300);
  }
}

.dry-badge--pink.dry-badge--dark {
  color: var(--background);
  background-color: var(--pink-600);

  .dark & {
    background-color: var(--pink-300);
  }
}

.dry-badge--rose.dry-badge--dark {
  color: var(--background);
  background-color: var(--rose-600);

  .dark & {
    background-color: var(--rose-300);
  }
}

.dry-badge--orangeDark.dry-badge--dark {
  color: var(--background);
  background-color: var(--orangeDark-600);

  .dark & {
    background-color: var(--orangeDark-300);
  }
}

.dry-badge--orange.dry-badge--dark {
  color: var(--background);
  background-color: var(--orange-600);

  .dark & {
    background-color: var(--orange-300);
  }
}

.dry-badge--yellow.dry-badge--dark {
  color: var(--background);
  background-color: var(--yellow-600);

  .dark & {
    background-color: var(--yellow-300);
  }
}

/* Outline */

/** 
  Ensure the heights are the same across variants, by accounting for the
  three-pixel border width.
*/

.dry-badge--outline.dry-badge--sm {
  min-height: 18px;
  padding: 0.5px 8px;
}

.dry-badge--outline.dry-badge--md {
  min-height: 24px;
  padding: 1px 8px;
}

.dry-badge--outline.dry-badge--lg {
  min-height: 28px;
  padding: 3.25px 12px;
}

.dry-badge--primary.dry-badge--outline {
  color: var(--primary-600);
  background-color: var(--background);
  border: 1.5px solid var(--primary-600);

  .dark & {
    color: var(--primary-300);
    background-color: var(--background);
    border: 1.5px solid var(--primary-300);
  }
}

.dry-badge--error.dry-badge--outline {
  color: var(--error-600);
  background-color: var(--background);
  border: 1.5px solid var(--error-600);

  .dark & {
    color: var(--error-300);
    background-color: var(--background);
    border: 1.5px solid var(--error-300);
  }
}

.dry-badge--warning.dry-badge--outline {
  color: var(--warning-600);
  background-color: var(--background);
  border: 1.5px solid var(--warning-600);

  .dark & {
    color: var(--warning-300);
    background-color: var(--background);
    border: 1.5px solid var(--warning-300);
  }
}

.dry-badge--success.dry-badge--outline {
  color: var(--success-600);
  background-color: var(--background);
  border: 1.5px solid var(--success-600);

  .dark & {
    color: var(--success-300);
    background-color: var(--background);
    border: 1.5px solid var(--success-300);
  }
}

.dry-badge--gray.dry-badge--outline {
  color: var(--gray-600);
  background-color: var(--background);
  border: 1.5px solid var(--gray-600);

  .dark & {
    color: var(--gray-300);
    background-color: var(--background);
    border: 1.5px solid var(--gray-300);
  }
}

.dry-badge--grayBlue.dry-badge--outline {
  color: var(--grayBlue-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayBlue-600);

  .dark & {
    color: var(--grayBlue-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayBlue-300);
  }
}

.dry-badge--grayCool.dry-badge--outline {
  color: var(--grayCool-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayCool-600);

  .dark & {
    color: var(--grayCool-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayCool-300);
  }
}

.dry-badge--grayModern.dry-badge--outline {
  color: var(--grayModern-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayModern-600);

  .dark & {
    color: var(--grayModern-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayModern-300);
  }
}

.dry-badge--grayNeutral.dry-badge--outline {
  color: var(--grayNeutral-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayNeutral-600);

  .dark & {
    color: var(--grayNeutral-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayNeutral-300);
  }
}

.dry-badge--grayIron.dry-badge--outline {
  color: var(--grayIron-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayIron-600);

  .dark & {
    color: var(--grayIron-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayIron-300);
  }
}

.dry-badge--grayTrue.dry-badge--outline {
  color: var(--grayTrue-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayTrue-600);

  .dark & {
    color: var(--grayTrue-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayTrue-300);
  }
}

.dry-badge--grayWarm.dry-badge--outline {
  color: var(--grayWarm-600);
  background-color: var(--background);
  border: 1.5px solid var(--grayWarm-600);

  .dark & {
    color: var(--grayWarm-300);
    background-color: var(--background);
    border: 1.5px solid var(--grayWarm-300);
  }
}

.dry-badge--moss.dry-badge--outline {
  color: var(--moss-600);
  background-color: var(--background);
  border: 1.5px solid var(--moss-600);

  .dark & {
    color: var(--moss-300);
    background-color: var(--background);
    border: 1.5px solid var(--moss-300);
  }
}

.dry-badge--greenLight.dry-badge--outline {
  color: var(--greenLight-600);
  background-color: var(--background);
  border: 1.5px solid var(--greenLight-600);

  .dark & {
    color: var(--greenLight-300);
    background-color: var(--background);
    border: 1.5px solid var(--greenLight-300);
  }
}

.dry-badge--green.dry-badge--outline {
  color: var(--green-600);
  background-color: var(--background);
  border: 1.5px solid var(--green-600);

  .dark & {
    color: var(--green-300);
    background-color: var(--background);
    border: 1.5px solid var(--green-300);
  }
}

.dry-badge--teal.dry-badge--outline {
  color: var(--teal-600);
  background-color: var(--background);
  border: 1.5px solid var(--teal-600);

  .dark & {
    color: var(--teal-300);
    background-color: var(--background);
    border: 1.5px solid var(--teal-300);
  }
}

.dry-badge--cyan.dry-badge--outline {
  color: var(--cyan-600);
  background-color: var(--background);
  border: 1.5px solid var(--cyan-600);

  .dark & {
    color: var(--cyan-300);
    background-color: var(--background);
    border: 1.5px solid var(--cyan-300);
  }
}

.dry-badge--blueLight.dry-badge--outline {
  color: var(--blueLight-600);
  background-color: var(--background);
  border: 1.5px solid var(--blueLight-600);

  .dark & {
    color: var(--blueLight-300);
    background-color: var(--background);
    border: 1.5px solid var(--blueLight-300);
  }
}

.dry-badge--blue.dry-badge--outline {
  color: var(--blue-600);
  background-color: var(--background);
  border: 1.5px solid var(--blue-600);

  .dark & {
    color: var(--blue-300);
    background-color: var(--background);
    border: 1.5px solid var(--blue-300);
  }
}

.dry-badge--blueDark.dry-badge--outline {
  color: var(--blueDark-600);
  background-color: var(--background);
  border: 1.5px solid var(--blueDark-600);

  .dark & {
    color: var(--blueDark-300);
    background-color: var(--background);
    border: 1.5px solid var(--blueDark-300);
  }
}

.dry-badge--indigo.dry-badge--outline {
  color: var(--indigo-600);
  background-color: var(--background);
  border: 1.5px solid var(--indigo-600);

  .dark & {
    color: var(--indigo-300);
    background-color: var(--background);
    border: 1.5px solid var(--indigo-300);
  }
}

.dry-badge--violet.dry-badge--outline {
  color: var(--violet-600);
  background-color: var(--background);
  border: 1.5px solid var(--violet-600);

  .dark & {
    color: var(--violet-300);
    background-color: var(--background);
    border: 1.5px solid var(--violet-300);
  }
}

.dry-badge--purple.dry-badge--outline {
  color: var(--purple-600);
  background-color: var(--background);
  border: 1.5px solid var(--purple-600);

  .dark & {
    color: var(--purple-300);
    background-color: var(--background);
    border: 1.5px solid var(--purple-300);
  }
}

.dry-badge--fuchsia.dry-badge--outline {
  color: var(--fuchsia-600);
  background-color: var(--background);
  border: 1.5px solid var(--fuchsia-600);

  .dark & {
    color: var(--fuchsia-300);
    background-color: var(--background);
    border: 1.5px solid var(--fuchsia-300);
  }
}

.dry-badge--pink.dry-badge--outline {
  color: var(--pink-600);
  background-color: var(--background);
  border: 1.5px solid var(--pink-600);

  .dark & {
    color: var(--pink-300);
    background-color: var(--background);
    border: 1.5px solid var(--pink-300);
  }
}

.dry-badge--rose.dry-badge--outline {
  color: var(--rose-600);
  background-color: var(--background);
  border: 1.5px solid var(--rose-600);

  .dark & {
    color: var(--rose-300);
    background-color: var(--background);
    border: 1.5px solid var(--rose-300);
  }
}

.dry-badge--orangeDark.dry-badge--outline {
  color: var(--orangeDark-600);
  background-color: var(--background);
  border: 1.5px solid var(--orangeDark-600);

  .dark & {
    color: var(--orangeDark-300);
    background-color: var(--background);
    border: 1.5px solid var(--orangeDark-300);
  }
}

.dry-badge--orange.dry-badge--outline {
  color: var(--orange-600);
  background-color: var(--background);
  border: 1.5px solid var(--orange-600);

  .dark & {
    color: var(--orange-300);
    background-color: var(--background);
    border: 1.5px solid var(--orange-300);
  }
}

.dry-badge--yellow.dry-badge--outline {
  color: var(--yellow-600);
  background-color: var(--background);
  border: 1.5px solid var(--yellow-600);

  .dark & {
    color: var(--yellow-300);
    background-color: var(--background);
    border: 1.5px solid var(--yellow-300);
  }
}