@import (reference) "~src/assets/openaire-theme/less/_import-variables";
@import (optional) "~src/assets/extend-theme/less/_import-variables";

@sdgs: #E6233D, #DF9F00, #19A220, #D70023, #FF0B00, #00BFE8, #FFC300, #B10240, #FF5D00,
#F50D86, #FF8A00, #CA8A03, #2B772B, #0098DF, #00B91C, #0069A2, #1C336A;

.custom-sdg-dot:after {
  content: "";
  background-image: url("~src/assets/common-assets/sdg/sdg-dot-img.svg");
  display: inline-block;
  background-size: 100% 100%;
  height: 18px;
  width: 18px;
  margin-left: 10px;
}

.sdg-card {
  width: 265px;
  height: 255px;

  img {
    height: @global-control-height;
    width: auto;
  }

  each(@sdgs, {
    &.sdg-@{index} {
      background-color: @value !important;
    }
  })
}