@mixin bg-cards {
  background-color: var(--card-bg-color);
  background-image: var(--card-bg-image);
  background-size: cover;
  background-position: 0% top;
}

@mixin bg-cards-overview {
  background-color: var(--card-overview-bg-color);
  background-image: var(--card-overview-bg-image);
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: 5% bottom;
}

@mixin bg-cards-light {
  background-color: var(--card-light-bg-color);
  background-image: var(--card-light-bg-image);
  background-size: cover;
  background-position: 0% top;
}

@mixin card-onhover {
  &::after {
    opacity: 0.1;
  }
}

@mixin card-hover {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    border-radius: var(--card-border-radius);
    opacity: 0;
    transition: opacity 0.3s;
  }
  &:hover {
    @include card-onhover;
  }
}

@mixin table-head {
  display: flex;
  align-items: center;
  padding: 10px;
  line-height: 1;
  background: rgba(28, 83, 109, 0.68);
  box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
}

@mixin h2 {
  color: var(--header-color);
  margin: var(--header-margins);
  display: var(--header-display);
}