.global-project-selector {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(
      220px,
      1fr
    )
    minmax(
      250px,
      380px
    );

  align-items:
    center;

  gap:
    18px;

  overflow:
    hidden;

  border-color:
    color-mix(
      in srgb,
      var(
        --primary
      )
      38%,
      var(
        --border
      )
    );
}

.global-project-selector::before {
  position:
    absolute;

  top:
    0;

  left:
    24px;

  width:
    70px;

  height:
    3px;

  background:
    var(
      --primary
    );

  content:
    "";
}

.global-project-selector__identity {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  gap:
    13px;
}

.global-project-selector__icon {
  display:
    grid;

  width:
    48px;

  height:
    48px;

  flex:
    0 0
    48px;

  place-items:
    center;

  border:
    1px solid
    var(
      --project-color
    );

  background:
    color-mix(
      in srgb,
      var(
        --project-color
      )
      10%,
      transparent
    );

  color:
    var(
      --project-color
    );
}

.global-project-selector__icon svg {
  width:
    21px;

  height:
    21px;
}

.global-project-selector__identity > div {
  display:
    grid;

  min-width:
    0;

  gap:
    4px;
}

.global-project-selector__identity span,
.global-project-selector__field > span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.global-project-selector__identity strong {
  overflow:
    hidden;

  color:
    var(
      --text
    );

  font-size:
    18px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.global-project-selector__field {
  display:
    grid;

  gap:
    7px;
}

.global-project-selector__field select {
  width:
    100%;

  min-height:
    46px;

  border-color:
    var(
      --primary
    );

  background:
    var(
      --background-secondary
    );

  font-weight:
    600;
}

.global-project-selector__status {
  display:
    flex;

  grid-column:
    1 /
    -1;

  align-items:
    center;

  gap:
    8px;

  padding-top:
    13px;

  border-top:
    1px solid
    var(
      --border
    );

  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

.global-project-selector__color {
  width:
    8px;

  height:
    8px;

  flex:
    0 0
    8px;

  border-radius:
    50%;
}

@media (
  max-width:
    780px
) {
  .global-project-selector {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .global-project-selector__status {
    grid-column:
      1;
  }
}