ujh/fountainpencompanion

.fpc-swab-card {
  display: flex;
  flex-direction: column;
  background: var(--fpc-bright-background);

  .fpc-swab-card__swab {
    margin-inline: auto;
    height: 180px;
    width: 180px;
    position: relative;
  }

  .fpc-swab-card__swab::before {
    content: " ";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background-color: var(--swab-color);
    -webkit-mask: url(../../../images/swab.svg);
    mask: url(../../../images/swab.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .fpc-swab-card__footer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
  }

  .fpc-swab-card__badges {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 220px;

    .badge {
      text-transform: capitalize;
    }

    .badge.tag {
      text-transform: none;

      &.cluster-tag {
        opacity: 0.4;
      }

      a {
        color: white;
        text-decoration-line: none;

        &:hover {
          text-decoration-line: underline;
        }
      }
    }
  }

  .fpc-swab-card__actions {
    min-width: 90px;
  }
}