@include export-module('badge-layout') {
  .e-badge {
    background: $badge-base-background-color;
    border-color: transparent;
    border-radius: $badge-base-border-radius;
    box-shadow: 0 0 0 2px transparent;
    box-sizing: border-box;
    color: $badge-base-text-color;
    display: inline-block;
    font-family: $font-family;
    font-size: $badge-base-font-size;
    font-weight: $badge-base-font-weight;
    line-height: $badge-base-line-height;
    @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
      height: $badge-base-height;
    }
    overflow: hidden;
    padding: $badge-padding;
    text-align: center;
    text-decoration: none;
    text-indent: $badge-base-text-indent;
    vertical-align: middle;

    &:hover {
      text-decoration: none;
    }

    &.e-badge-pill {
      border-radius: $badge-pill-border-radius;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
        padding: $badge-pill-padding;
      }
    }

    &.e-badge-ghost {
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
        line-height: $badge-ghost-line-height;
        padding: $badge-ghost-padding;
      }
    }

    &.e-badge-notification {
      border-radius: $badge-notification-border-radius;
      font-size: $badge-notification-font-size;
      height: $badge-notification-height;
      left: $badge-notification-left;
      line-height: $badge-notification-line-height;
      min-width: $badge-notification-min-width;
      padding: $badge-notification-padding;
      position: absolute;
      top: $badge-notification-top;
      width: auto;

      &.e-badge-ghost {
        line-height: $badge-notification-ghost-line-height;
      }
    }

    &.e-badge-circle {
      border-radius: $badge-circle-border-radius;
      height: $badge-circle-height;
      line-height: $badge-circle-line-height;
      min-width: $badge-circle-min-width;
      padding: $badge-circle-padding;
      width: $badge-circle-width;

      &.e-badge-ghost {
        line-height: $badge-circle-ghost-line-height;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
          padding: $badge-circle-ghost-padding;
        }
      }
    }

    &.e-badge-overlap {
      position: absolute;
      top: $badge-overlap-top;
      transform: $badge-overlap-transform-left;
    }

    &.e-badge-dot {
      border-radius: $badge-dot-border-radius;
      box-shadow: $badge-dot-box-shadow;
      height: $badge-dot-height;
      left: $badge-dot-left;
      line-height: $badge-dot-line-height;
      margin: 0;
      min-width: $badge-dot-min-width;
      overflow: visible;
      padding: $badge-dot-padding;
      position: absolute;
      top: $badge-dot-top;
      width: $badge-dot-width;
    }

    &.e-badge-bottom {
      &.e-badge-dot {
        bottom: 3px;
        position: absolute;
        top: auto;
      }

      &.e-badge-notification {
        bottom: -3px;
        position: absolute;
        top: auto;
      }
    }

    @at-root {
      button#{''} .e-badge {
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
          line-height: $leading-none;
        }
        @else {
          line-height: .9;
        }
        position: relative;
        top: $badge-button-top;

        &.e-badge-circle {
          height: $badge-button-circle-height;
          line-height: $badge-button-circle-line-height;
          width: $badge-button-circle-width;

          &.e-badge-ghost {
            line-height: $badge-ghost-circle-line-height;
          }
        }
      }
    }
  }

  .e-bigger .e-badge,
  .e-badge.e-bigger {
    @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
      border-radius: $badge-touch-base-border-radius;
      font-size: $badge-touch-base-font-size;
      font-weight: $badge-touch-base-font-weight;
      height: $badge-touch-base-height;
      line-height: $badge-touch-base-line-height;
      padding: $badge-touch-padding;

      &.e-badge-pill {
        border-radius: $badge-pill-border-radius;
        padding: $badge-touch-pill-padding;
      }

      &.e-badge-ghost {
        padding: $badge-touch-ghost-padding;

        &.e-badge-circle {
          padding: $badge-touch-ghost-circle-padding;
        }

        &.e-badge-notification {
          padding: $badge-touch-ghost-notification-padding;
        }
      }

      &.e-badge-notification {
        border-radius: $badge-pill-border-radius;
        min-width: $badge-touch-notification-min-width;
        padding: $badge-touch-pill-padding;
      }

      &.e-badge-circle {
        border-radius: $badge-circle-border-radius;
        min-width: $badge-circle-min-width;
        padding: $badge-touch-circle-padding;
        width: $badge-touch-circle-width;
      }

      &.e-badge-dot {
        border-radius: $badge-dot-border-radius;
        height: $badge-touch-dot-height;
        width: $badge-touch-dot-width;
      }
    }
  }
}