@import '~@palmetto/palmetto-design-tokens/build/scss/variables-size';

@mixin size-sm {
  font-size: var(--size-font-2xs);
  padding: var(--size-spacing-2xs) var(--size-spacing-2xs);
}

%size-sm {
  @include size-sm;
}

.size-sm {
  @extend %size-sm;
}

@mixin size-md {
  font-size: var(--size-font-xs);
  padding: var(--size-spacing-2xs) var(--size-spacing-xs);
}

%size-md {
  @include size-md;
}

.size-md {
  @extend %size-md;
}

@mixin size-lg {
  font-size:  var(--size-font-sm);
  padding: var(--size-spacing-2xs) var(--size-spacing-xs);
}

%size-lg {
  @include size-lg;
}

.size-lg {
  @extend %size-lg;
}

@mixin size-xl {
  font-size: var(--size-font-md);
  padding: var(--size-spacing-xs) var(--size-spacing-sm);
}

%size-xl {
  @include size-xl;
}

.size-xl {
  @extend %size-xl;
}

.badge {
  border-radius: var(--size-border-radius-sm);
  border-style: solid;
  border-width: var(--size-border-xs);
  font-family: var(--asset-fonts-body);
  font-weight: var(--size-font-weight-bold);
  letter-spacing: 0.8px;
  line-height: var(--size-line-height-base);
  text-transform: uppercase;

  &.primary {
    background-color: var(--color-background-badge-primary);
    border-color: var(--color-border-badge-primary);
    color: var(--color-text-badge-primary);
  }

  &.secondary {
    background-color: var(--color-background-badge-secondary);
    border-color: var(--color-border-badge-secondary);
    color: var(--color-text-badge-secondary);
  }

  &.tertiary {
    background-color: var(--color-background-badge-tertiary);
    border-color: var(--color-border-badge-tertiary);
    color: var(--color-text-badge-tertiary);
  }

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

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

  &.info {
    background-color: var(--color-background-badge-info);
    border-color: var(--color-border-badge-info);
    color: var(--color-text-badge-info);
  }

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

  &.default {
    background-color: var(--color-background-badge-default);
    border-color: var(--color-border-badge-default);
    color: var(--color-text-badge-default);
  }

  &.size-sm {
    @extend %size-sm;
  }

  &.size-md {
    @extend %size-md;
  }

  &.size-lg {
    @extend %size-lg;
  }

  &.size-xl {
    @extend %size-xl;
  }

  @media (min-width: $size-breakpoint-tablet) {
    &.size-sm-tablet {
      @include size-sm;
    }

    &.size-md-tablet {
      @include size-md;
    }

    &.size-lg-tablet {
      @include size-lg;
    }

    &.size-xl-tablet {
      @include size-xl;
    }
  }

  @media (min-width: $size-breakpoint-desktop) {
    &.size-sm-desktop {
      @include size-sm;
    }

    &.size-md-desktop {
      @include size-md;
    }

    &.size-lg-desktop {
      @include size-lg;
    }

    &.size-xl-desktop {
      @include size-xl;
    }
  }

  @media (min-width: $size-breakpoint-hd) {
    &.size-sm-hd {
      @include size-sm;
    }

    &.size-md-hd {
      @include size-md;
    }

    &.size-lg-hd {
      @include size-lg;
    }

    &.size-xl-hd {
      @include size-xl;
    }
  }
}
