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

.setType(@color, @position: left) {
  border-@{position}: 4px solid fade(@color, 30%);

  & .type {
    color: @color;
  }
}

@media(min-width: @breakpoint-medium) {
  .uk-card {
    &.funder {
      .setType(@funder-color);
    }

    &.ri {
      .setType(@ri-color);
    }

    &.organization {
      .setType(@organization-color);
    }
  }
}

@media(max-width: @breakpoint-small-max) {
  .uk-card {
    &.funder {
      .setType(@funder-color, bottom);
    }

    &.ri {
      .setType(@ri-color, bottom);
    }

    &.organization {
      .setType(@organization-color, bottom);
    }
  }
}