// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;

$border-radius: 999rem;

.#{$prefix}-badge {
  background-color: $color-black-100;
  border: calc(2rem/16) solid $color-black-100;
  border-radius: $border-radius;
  color: $color-black-base;
  display: inline-block;
  font-size: $ts-xs;
  font-weight: $font-weight-medium;
  letter-spacing: .02rem;
  line-height: 1;
  padding: calc(3rem/16) .5rem;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -osx-font-smoothing: grayscale;

  &--secondary {
    background-color: $color-white-base;
  }
}

a.#{$prefix}-badge {
  text-decoration: none;

  &:hover {
    color: $color-black-base;
    background-color: $color-black-000;
  }

  &--info:hover,
  &--info-secondary:hover {
    background-color: $color-blue-000;
    color: $color-blue-600;
  }

  &--success:hover,
  &--success-secondary:hover {
    background-color: $color-green-000;
    color: $color-green-600;
  }

  &--warning:hover,
  &--warning-secondary:hover {
    background-color: $color-gold-000;
    color: $color-black-600;
  }

  &--danger:hover,
  &--danger-secondary:hover {
    background-color: $color-orange-000;
    color: $color-orange-600;
  }

  &:focus {
    border-radius: $border-radius;
  }
}

.#{$prefix}-badge--info {
  background-color: $color-blue-500;
  border-color: $color-blue-500;
  color: $color-white-base;

  &-secondary {
    background-color: $color-white-base;
    border-color: $color-blue-100;
    color: $color-blue-500;
  }
}

.#{$prefix}-badge--success {
  background-color: $color-green-500;
  border-color: $color-green-500;
  color: $color-white-base;

  &-secondary {
    background-color: $color-white-base;
    border-color: $color-green-100;
    color: $color-green-500;
  }
}

.#{$prefix}-badge--warning {
  background-color: $color-gold-400;
  border-color: $color-gold-400;
  color: $color-black-700;

  &-secondary {
    background-color: $color-white-base;
    border-color: $color-gold-100;
    color: $color-black-500;
  }
}

.#{$prefix}-badge--danger {
  background-color: $color-orange-500;
  border-color: $color-orange-500;
  color: $color-white-base;

  &-secondary {
    background-color: $color-white-base;
    border-color: $color-orange-100;
    color: $color-orange-500;
  }
}