@import "./colors.scss";

@mixin defaultcolor($color) {
  background-color: $color;
  color: $white;
}

@mixin roundedcolor($color) {
  border: 1px solid $color;
  color: $color;
}

%small-badge {
  padding: 5px 5px 4px;
}

%extrasmall-badge {
  padding: 4px 5px 3px;
}

span.badge {
  display: inline-block;
  font-size: 1rem;
  text-align: center;
  line-height: 100%;
  color: $white;
  background: $black;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: -0.2px;
  @extend %small-badge;
  -webkit-appearance: none;
  outline:none;
  
  &.small {
    @extend %small-badge;
  }

  &.extrasmall {
    @extend %extrasmall-badge;
  }

  &.carrot {
    @include defaultcolor($carrot);
  }

  &.green {
    @include defaultcolor($green);
  }

  &.blue {
    @include defaultcolor($blue);
  }

  &.indigo {
    @include defaultcolor($indigo);
  }

  &.yellow {
    @include defaultcolor($yellow);
  }

  &.tomato {
    @include defaultcolor($tomato);
  }

  &.gray {
    @include defaultcolor($gray);
  }

  &.rounded {
    background-color: $white;
    border: 1px solid $black;
    border-radius: 9px;
    color: $black;
    padding: 2px 4px;

    &.carrot {
      @include roundedcolor($carrot);
    }
  
    &.green {
      @include roundedcolor($green);
    }
  
    &.blue {
      @include roundedcolor($blue);
    }
  
    &.indigo {
      @include roundedcolor($indigo);
    }
  
    &.yellow {
      @include roundedcolor($yellow);
    }
  
    &.tomato {
      @include roundedcolor($tomato);
    }
  
    &.gray {
      @include roundedcolor($gray);
    }
  }
}