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

@title-width: 350px;
@dot-size: 45px;
@card-border-radius: 14px;
@curator-image-size: 80px;
@curator-border-radius: 18px;

.hero {
  background-image: url("~/src/assets/irish-assets/home/logo-shadow.png");
  background-position: center -100%;
  background-repeat: no-repeat;
}

@media (max-width: @breakpoint-small-max) {
  .hero {
    background-position: center bottom;
  }
}

.national-monitor {
  position: relative;

  img {
    position: relative;
  }

  &::before {
    content: 'National OA Monitor';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    mix-blend-mode: overlay;
  }
}

.title {
  width: @title-width;

  &::after {
    content: '';
    background-image: url("~/src/assets/irish-assets/home/dot.svg");
    background-size: contain;
    width: @dot-size;
    height: @dot-size;
    display: inline-flex;
    transform: translateY(50%);
  }
}

.uk-card {
  border-radius: @card-border-radius;
}

.country:not(:hover) .uk-button-primary {
  background-color: @country-color;
  color: @global-inverse-color;
}

.funder:not(:hover) .uk-button-primary {
  background: @funder-color;
  color: @global-inverse-color;
}

.organization:not(:hover) .uk-button-primary {
  background-color: @organization-color;
  color: @global-inverse-color;
}

.researcher:not(:hover) .uk-button-primary {
  background-color: @researcher-color;
  color: @global-inverse-color;
}

.datasource:not(:hover) .uk-button-primary {
  background-color: @datasource-color;
  color: @global-inverse-color;
}

.curators {

  img {
    width: @curator-image-size;
    height: @curator-image-size;
    object-fit: cover;
    border-radius: @curator-border-radius;

    &:nth-child(2) {
      transform: rotate(-10deg);
      object-position: left;
    }

    &:last-child {
      transform: rotate(10deg);
    }
  }
}
