.app-item {
  // individual list item in expanded builds/deployments/releases section
  color: rgb(var(--text-muted));
  margin-right: scale.$sm-2;
  width: 100%;
  border-radius: 5px;
  @include Typography.Interface(M);

  hr {
    border: 0;
    width: 100%;
    margin: 0;
    border-top: 1px solid rgb(var(--border));
  }

  a:not(.button) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
    width: 100%;
    min-height: 73px;
    padding: scale.$sm-1 scale.$sm-2;
    border-radius: 5px;

    &:hover code {
      color: rgb(var(--link));
    }
  }

  code {
    font-size: 1rem;
  }

  .badge--version {
    margin-right: scale.$sm-2;
  }

  .button {
    max-width: 100%;
    margin-left: scale.$base;

    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .timestamp__label {
    @include Typography.Interface(S);
  }

  &--previous {
    background: rgb(var(--panel));
  }

  &__deployment-state {
    display: grid;
    align-items: center;
    grid-template-columns: max-content 92%;
    column-gap: scale.$sm--3;
    row-gap: scale.$sm--3;

    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .health-check {
      width: scale.$sm--2;
      height: scale.$sm--2;
      border-radius: 50%;
      background: color.$black;
      justify-self: center;

      &--text-description {
        color: rgb(var(--text-deploy-url));
      }

      &--alive {
        background: color.$green-500;
        animation: pulse 2s infinite;
        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }

      &--ready {
        background: color.$green-500;
      }

      &--down {
        background: color.$red-500;
        @media (prefers-color-scheme: dark) {
          background: color.$red-400;
        }
      }

      &--partial {
        background: color.$orange-500;
      }
    }

    .deployment-state {
      color: rgb(var(--text-muted));
    }
  }

  .operation-status-indicator {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-right: scale.$sm-2;
    max-width: 85%;

    span {
      width: 100%;
    }
  }
}

.destroyed-deployments-filter {
  // explanatory text + button at the bottom of the expanded list of deployments
  display: block;
  font-size: 0.875rem;

  hr {
    margin: 0;
  }

  span {
    padding: scale.$sm-1 0;
  }
}
