.projects {
  display: grid;
  gap: var(--column-gap, var(--size-4));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: var(--size-4);
}

.project {
  padding-top: 2rem;
  position: relative;

  .btn {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: none;
    --btn-padding: var(--size-2);

    --icon-size: 1.25rem; 
  }
}

.project--content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 1rem;

  .avatar-group {
    justify-content: end;
  }
}

.project--link {
  position: absolute;
  inset: 0;
}

.project--pinned, .project--unpinned {
  position: absolute;
  top: var(--size-2);
  right: var(--size-2);
  display: none;
}

.project--pinned {
  display: flex;
}

.project--unpinned {
  @media(hover: none) {
    display: flex;
  }

  @media (hover: hover) {
    .card:hover & {
      display: flex;
    }
  }
}

.project--description {
  --lexxy-editor-rows: 4lh;
}

.colorpicker {
  display: grid;
  gap: var(--size-6);
  grid-template-columns: repeat(var(--grid-columns, 4), 1fr);;
  padding: var(--size-4);

  @media (width >= 48rem) {
    --grid-columns: 8;
  }

  .colorpicker--btn {
    width: var(--size-12);
    height: var(--size-12); 
    border-radius: var(--rounded-full);

    input[type="radio"] {
      display: none;
    }    

    &:has(input[type="radio"]:checked) {
      outline: var(--border-2) solid var(--gray-600);
      outline-offset: var(--size-1);
    }
  }
}

.color--gray { background-image: linear-gradient(to bottom left, var(--zinc-400), var(--gray-400)); }
.color--text-gray { color: var(--gray-400); }
.color--red { background-image: linear-gradient(to bottom left, var(--rose-400), var(--red-400)); }
.color--text-red { color: var(--red-400); }
.color--orange { background-image: linear-gradient(to bottom left, var(--amber-400), var(--orange-400)); }
.color--text-orange { color: var(--orange-400); }
.color--yellow { background-image: linear-gradient(to bottom left, var(--amber-400), var(--yellow-400)); }
.color--text-yellow { color: var(--yellow-400); }
.color--green { background-image: linear-gradient(to bottom left, var(--emerald-400), var(--green-400)); }
.color--text-green { color: var(--green-400); }
.color--blue { 	background-image: linear-gradient(to bottom left, var(--cyan-400), var(--blue-400)); }
.color--text-blue { 	color: var(--blue-400); }
.color--violet { background-image: linear-gradient(to bottom left, var(--purple-400), var(--violet-400)); }
.color--text-violet { color: var(--violet-400); }
.color--pink { background-image: linear-gradient(to bottom left, var(--pink-400), var(--pink-400)); }
.color--text-pink { color: var(--pink-400); }