@use './scaling';
/*
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
*/

.general-tag {
  background-color: rgb(160, 162, 163);
  color: white;
}

.other-tag {
  background-color: #81b4c2;
  color: white;
}

.info-tag {
  background-color: #7ba8ec;
  color: white;
}

.attack-tag {
  background-color: rgb(227, 135, 81);
  color: white;
}

.mbc-tag {
  background-color: rgb(220, 105, 52);
  color: white;
}

.short-tag {
  display: none !important;
}

.warning-tag {
  background-color: rgb(227, 135, 81);
  color: white;
}

.danger-tag {
  background-color: rgb(184, 77, 77);
  color: white;
}

.tag-item {
  display: inline-flex;
  border-radius: 6px;
  font-size: 12px;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
}

.tag-item.clickable {
  display: inline-flex;
  border-radius: 6px;
  font-size: 12px;
  padding: 0.1rem 0.4rem 0.1rem 0.4rem;
  cursor: pointer;
  max-width: 50rem;
  overflow: hidden;
}

.tag-item .close {
  height: 20px;
  width: 20px;
  background-color: rgb(48, 48, 48);
  color: #ffff;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.5em;
  font-size: 18px;
}

.tag-input {
  outline: 0 !important;
  border: 0 !important;
  width: 100px !important;
  background: none !important;
}

.add-tag-btn {
  color: white !important;
  background-color: green !important;
  border: none !important;
}

// 1400px
//@media (max-width: scaling.$xxl) { ... }

// 1200x
//@media (max-width: scaling.$xl) { ... }

// 992px
@media (max-width: scaling.$lg) {
  .tags-hide {
    display: none !important;
  }

  .short-tag {
    display: block !important;
  }
}

// 768px
//@media (max-width: scaling.$md) { ... }

// 576px
//@media (max-width: scaling.$sm) { ... }
