candidate-table-row.pcss

.candidate-table-row {
  /* Relative for box shadow to layer properly. */
  @apply relative w-full py-4 grid items-center;

  grid-template-areas: "position avatar name"
                       "position avatar bio"
                       "position avatar affiliation";
  /* Needs to match avatar width */
  grid-template-columns: auto theme("width.16") 1fr;

  &:after {
    content: '';
    @apply absolute z-10 w-full h-full transition duration-200 elevation-0;
  }

  &:hover:after {
    @apply elevation-10;
  }

  &:hover {
    @apply no-underline;
  }
}

.candidate-table-row__position {
  @apply pl-4 pr-6;
  grid-area: position;
}

.candidate-table-row__avatar {
  @apply w-16;
  grid-area: avatar;
}

.candidate-table-row__name {
  @apply pl-6 pr-4 py-1;
  grid-area: name;
}

.candidate-table-row__bio {
  /* py-1 here to avoid overflow: hidden cutting Č Ř characters etc. */
  @apply truncate py-1 pl-6 pr-4;
  grid-area: bio;
}

.candidate-table-row__affiliation {
  @apply flex items-center justify-start whitespace-no-wrap py-1 pl-6 pr-4;
  grid-area: affiliation;
}

@screen md {
  .candidate-table-row {
    @apply py-1;
    grid-template-areas: "position avatar name bio affiliation";
    /* Needs to match avatar width */
    grid-template-columns: auto theme("width.10") 20% 1fr 25%;
  }

  .candidate-table-row__avatar {
    @apply w-10;
  }

  .candidate-table-row__name {
    @apply px-8;
  }

  .candidate-table-row__position {
    @apply pl-16;
  }

  .candidate-table-row__bio {
    @apply border-l border-grey-125 px-8;
  }

  .candidate-table-row__affiliation {
    @apply pl-8 pr-16;
  }
}