zitadel/console/src/app/modules/info-row/info-row.component.scss

@mixin info-row-theme($theme) {
  $foreground: map-get($theme, foreground);
  $button-text-color: map-get($foreground, text);
  $button-disabled-text-color: map-get($foreground, disabled-button);
  $secondary-text: map-get($foreground, secondary-text);

  .info-row {
    display: flex;
    flex-direction: column;
    margin: 0 -0.5rem;

    @media only screen and (min-width: 500px) {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .info-wrapper {
      display: flex;
      flex-direction: column;
      margin: 0 0.5rem 0.5rem 0.5rem;
      flex: 1;
      align-items: flex-start;
      box-sizing: border-box;

      .state {
        margin: 0.25rem 0;
      }

      // &:not(.width) {
      //   min-width: 100px;
      // }

      .info-row-title {
        font-size: 12px;
        color: $secondary-text;
        margin: 0;
      }

      .info-row-desc {
        margin: 0;
        font-size: 14px;
        padding: 2px 0;
      }

      .copy-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: stretch;

        button {
          transition: opacity 0.15s ease-in-out;
          background-color: #8795a110;
          border: 1px solid #8795a160;
          border-radius: 4px;
          padding: 0.25rem 1rem;
          margin: 0.25rem 0;
          color: $button-text-color;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: copy;

          &[disabled] {
            color: $button-disabled-text-color;
          }
        }

        .environment {
          display: flex;
          flex-direction: column;
          width: 100%;
          margin: 0.25rem 0;

          .key {
            font-size: 14px;
          }
        }
      }
    }
  }
}