.root {
  margin-left: 10px;
}

.headerSection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
}

.header {
  font-weight: 600;
  padding-top: 6px;
  padding-bottom: 6px;
}

.identityLists {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

.subHeader {
  display: flex;
  margin: 12px 0;
  font-weight: 600;
}

.cellContainer {
  grid-template-areas:
    "       icon           name          .           button-group"
    "       .              desc          .           button-group";
  grid-template-columns: min-content auto 1fr 330px;

  /* stylelint-disable-next-line media-query-no-invalid */
  @media screen(tablet) {
    grid-template-areas:
      "        icon           name           name        "
      "        .              desc           desc        "
      "        button-group   button-group   button-group";
    grid-template-columns: min-content auto auto;
  }

  &.ldap {
    grid-template-areas:
      "       icon           name          .              button-group"
      "       .              info          info           button-group"
      "       .              desc          .              button-group";

    /* stylelint-disable-next-line media-query-no-invalid */
    @media screen(tablet) {
      grid-template-areas:
        "        icon           name           name        "
        "        .              info           info        "
        "        .              desc           desc        "
        "        button-group   button-group   button-group";
    }
  }

  display: grid;
  column-gap: 8px;
  row-gap: 8px;
  margin-top: 16px;
}

.cellIcon {
  grid-area: icon;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cellName {
  grid-area: name;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cellNameExternalLink {
  color: inherit;
}

.cellDescUnverified {
  color: #e0aa1a;
  white-space: nowrap;
}

.cellDescVerified {
  color: #10b070;
}

.cellDescSeparator {
  color: #888888;
  margin: 0 8px;
}

.cellLDAPInfo {
  grid-area: info;
}

.cellDesc {
  color: #888888;
  grid-area: desc;
  display: flex;
  flex-direction: row;
}

.buttonGroup {
  grid-area: button-group;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
}

.actionButton {
  grid-area: button-group;
  justify-self: end;
}

.controlButton {
  border: 1px solid #d8d8d8;
  font-weight: 600;
  white-space: nowrap;
}

.removeButton {
  grid-column: 2 / span 1;
}

.verifyButton {
  grid-column: span 1 / span 1;
}

.unverifyButton {
  grid-column: span 1 / span 1;
}
