css {
  .project {
    display: block;
    position: relative;
    padding-bottom: 100%;
    color: inherit;
    background-image: linear-gradient(45deg, #20de88, #28bbe8);
    transition: box-shadow 0.5s;
  }
  .showing-desc::after {
    content: '';
    background-color: #24364a;
    width: 24px;
    height: 24px;
    margin: -12px;
    transform: rotate(45deg);
    box-sizing: border-box;
    border-top-left-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    // pointer-events: none;
  }
}
@media (hover: hover) {
  .project:not(.showing-desc):hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.2s;
    z-index: 1;
  }
}
@media (min-width: 680px) {
  .project {
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
  .showing-desc::after {
    top: calc(100% + 20px);
    bottom: unset;
    border-top-left-radius: 10px;
    border: 1px solid transparent;
    border-top-color: rgba(151, 189, 179, 0.2);
    border-left-color: rgba(151, 189, 179, 0.2);
  }
}
$classes: 'project';
@each $tag in map.get($project, 'tags') {
  $classes: '#{$classes} project-#{$tag}';
}
a.#{$classes}[href="#{map.get($project, 'path')}"][data-desc="#{map.get($project, 'description')}"] {
  css {
    .thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: 0.7;
      filter: grayscale(1);
      transition: opacity 0.5s, filter 0.5s;
    }
    .showing-desc .thumbnail {
      opacity: 1;
      filter: grayscale(0);
      transition: opacity 0.2s, filter 0.2s;
    }
  }
  @media (hover: hover) {
    .project:hover .thumbnail {
      opacity: 1;
      filter: grayscale(0);
      transition: opacity 0.2s, filter 0.2s;
    }
  }
  @media (min-width: 680px) {
    .thumbnail {
      border-radius: 10px;
    }
  }
  img.thumbnail[src="#{map.get($project, 'image')}"][alt="Thumbnail for #{map.get($project, 'name')}"][width='100'][height='100'][loading='lazy'] {
  }

  css {
    .title {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      background-image: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.05) 90%,
        transparent 100%
      );
      padding: 10px 15px;
      padding-top: 30px;
      font-size: 1px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      color: white;
      opacity: 0;
      transition: opacity 0.2s;
    }
  }
  @media (min-width: 680px) {
    .title {
      font-size: 1.5rem;
      opacity: 0.5;
    }
    .project.showing-desc .title {
      opacity: 0;
      pointer-events: none;
    }
  }
  @media (min-width: 680px) and (hover: hover) {
    .project:not(.showing-desc):hover .title {
      opacity: 1;
    }
  }
  span.title {
    content: "#{map.get($project, 'name')}";
  }

  css {
    .tags {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      margin: 8px;
    }
  }
  span.tags {
    @each $tag, $index in map.get($project, 'tags') {
      $tag-info: map.get($tags, $tag);
      content: ' ';
      css {
        .tag {
          display: block;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 8px;
          opacity: 0;
          transition-delay: 0s;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        }
        .project.showing-desc .tag {
          opacity: 0;
          pointer-events: none;
        }
      }
      @media (hover: hover) {
        .project:not(.showing-desc):hover .tag {
          opacity: 1;
        }
      }
      css {
        // Separate so that the style unduplicator is able to see this as
        // separate
        .project:hover .tag:nth-child(#{$index}) {
          transition-delay: calc(0.1s * #{$index});
        }
      }
      span.tag.base-tag.tag-#{$tag}[title="#{map.get($tag-info, 'name')}"] {
      }
    }
  }

  css {
    .show-info-btn {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      padding: 6px;
    }
    .show-info-icon {
      display: block;
      width: 36px;
      height: 36px;
      background-color: rgba(0, 0, 0, 0.3);
      background-image: url('/home-page/icons/feather-info.svg');
      background-size: 24px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.5s, background-color 0.2s, box-shadow 0.2s;
      transition-delay: 0.05s, 0, 0;
    }
    .show-info-btn:hover .show-info-icon {
      background-color: rgba(0, 0, 0, 0.8);
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    }
    .show-info-btn:focus-visible .show-info-icon {
      opacity: 1;
      background-color: black;
    }
  }
  @media (hover: hover) {
    .project:not(.showing-desc):hover .show-info-icon {
      opacity: 1;
    }
  }
  @media (min-width: 680px) {
    .has-js .show-info-btn {
      display: block;
    }
  }
  button.show-info-btn[type='button'][title='Show project info'][aria-controls='description-wrapper'] {
    span.show-info-icon {
    }
  }
}