@include export-module('badge-theme') {
  //sass-lint:disable no-color-literals
  .e-badge {
    &.e-badge-primary:not(.e-badge-ghost):not([href]),
    &.e-badge-primary[href]:not(.e-badge-ghost) {
      background-color: $badge-primary-bg-color;
      color: $badge-primary-font-color;
    }

    &.e-badge-secondary:not(.e-badge-ghost):not([href]),
    &.e-badge-secondary[href]:not(.e-badge-ghost) {
      background-color: $badge-secondary-bg-color;
      color: $badge-secondary-font-color;
    }

    &.e-badge-success:not(.e-badge-ghost):not([href]),
    &.e-badge-success[href]:not(.e-badge-ghost) {
      background-color: $badge-success-bg-color;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
        color: $badge-success-font-color;
      }
      @else {
        color: $badge-dark-font-color;
      }
    }

    &.e-badge-danger:not(.e-badge-ghost):not([href]),
    &.e-badge-danger[href]:not(.e-badge-ghost) {
      background-color: $badge-danger-bg-color;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' ) {
        color: $badge-danger-font-color;
      }
      @else {
        color: $badge-dark-font-color;
      }
    }

    &.e-badge-warning:not(.e-badge-ghost):not([href]),
    &.e-badge-warning[href]:not(.e-badge-ghost) {
      background-color: $badge-warning-bg-color;
      color: $badge-warning-font-color;
    }

    &.e-badge-info:not(.e-badge-ghost):not([href]),
    &.e-badge-info[href]:not(.e-badge-ghost) {
      background-color: $badge-info-bg-color;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
        color: $badge-info-font-color;
      }
      @else {
        color: $badge-dark-font-color;
      }
    }

    &.e-badge-light:not(.e-badge-ghost):not([href]),
    &.e-badge-light[href]:not(.e-badge-ghost) {
      background-color: $badge-light-bg-color;
      color: $badge-light-font-color;
    }

    &.e-badge-dark:not(.e-badge-ghost):not([href]),
    &.e-badge-dark[href]:not(.e-badge-ghost) {
      background-color: $badge-dark-bg-color;
      color: $badge-dark-font-color;
    }

    &.e-badge-primary[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-primary-bg-color, $amount: 10%);
      }
    }

    &.e-badge-secondary[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-secondary-bg-color, $amount: 10%);
      }
    }

    &.e-badge-success[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-success-bg-color, $amount: 10%);
      }
    }

    &.e-badge-danger[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-danger-bg-color, $amount: 10%);
      }
    }

    &.e-badge-warning[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-warning-bg-color, $amount: 10%);
      }
    }

    &.e-badge-info[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-info-bg-color, $amount: 10%);
      }
    }

    &.e-badge-light[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-light-bg-color, $amount: 10%);
      }
    }

    &.e-badge-dark[href]:not(.e-badge-ghost) {
      &:hover {
        background-color: darken($color: $badge-dark-bg-color, $amount: 10%);
      }
    }

    &.e-badge-primary[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-primary-bg-color, $amount: 15%);
        color: darken($color: $badge-primary-bg-color, $amount: 15%);
      }
    }

    &.e-badge-secondary[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-secondary-bg-color, $amount: 15%);
        color: darken($color: $badge-secondary-bg-color, $amount: 15%);
      }
    }

    &.e-badge-success[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-success-bg-color, $amount: 15%);
        color: darken($color: $badge-success-bg-color, $amount: 15%);
      }
    }

    &.e-badge-danger[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-danger-bg-color, $amount: 15%);
        color: darken($color: $badge-danger-bg-color, $amount: 15%);
      }
    }

    &.e-badge-warning[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-warning-bg-color, $amount: 15%);
        color: darken($color: $badge-warning-bg-color, $amount: 15%);
      }
    }

    &.e-badge-info[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-info-bg-color, $amount: 15%);
        color: darken($color: $badge-info-bg-color, $amount: 15%);
      }
    }

    &.e-badge-light[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-light-bg-color, $amount: 15%);
        color: darken($color: $badge-light-bg-color, $amount: 15%);
      }
    }

    &.e-badge-dark[href].e-badge-ghost {
      &:hover {
        border-color: darken($color: $badge-dark-bg-color, $amount: 15%);
        color: darken($color: $badge-dark-bg-color, $amount: 15%);
      }
    }

    &.e-badge-ghost {
      &.e-badge-primary {
        background-color: transparent;
        border: 1px solid $badge-primary-bg-color;
        color: $badge-primary-bg-color;
      }

      &.e-badge-secondary {
        background-color: transparent;
        @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
          border: 1px solid $badge-secondary-font-color;
          color: $badge-secondary-font-color;
        }
        @else {
          border: 1px solid $badge-secondary-bg-color;
          color: $badge-secondary-bg-color;
        }
      }

      &.e-badge-success {
        background-color: transparent;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
          border: 1px solid $badge-success-font-color;
          color: $badge-success-font-color;
        }
        @else {
          border: 1px solid $badge-success-bg-color;
          color: $badge-success-bg-color;
        }
      }

      &.e-badge-danger {
        background-color: transparent;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
          border: 1px solid $badge-danger-font-color;
          color: $badge-danger-font-color;
        }
        @else {
          border: 1px solid $badge-danger-bg-color;
          color: $badge-danger-bg-color;
        }
      }

      &.e-badge-warning {
        background-color: transparent;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
          border: 1px solid $badge-warning-font-color;
          color: $badge-warning-font-color;
        }
        @else {
          border: 1px solid $badge-warning-bg-color;
          color: $badge-warning-bg-color;
        }
      }

      &.e-badge-info {
        background-color: transparent;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
          border: 1px solid $badge-info-font-color;
          color: $badge-info-font-color;
        }
        @else {
          border: 1px solid $badge-info-bg-color;
          color: $badge-info-bg-color;
        }
      }

      &.e-badge-light {
        background-color: transparent;
        @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
          border: 1px solid $badge-light-font-color;
          color: $badge-light-font-color;
        }
        @else {
          border: 1px solid $badge-light-bg-color;
          color: $badge-light-bg-color;
        }
      }

      &.e-badge-dark {
        background-color: transparent;
        border: 1px solid $badge-dark-bg-color;
        color: $badge-dark-bg-color;
      }
    }
  }
}