Overleaf/services/web/frontend/stylesheets/modules/labs.scss

.labs-opt-in-wrapper {
  color: var(--neutral-60);

  h1,
  h2,
  h3,
  h4 {
    color: var(--content-primary);
  }

  #experiments-container {
    .title-row {
      display: flex;
    }

    .labs-experiment-widget-container {
      border: 1px solid var(--border-divider);
    }
  }

  .labs-icon {
    background-color: var(--green-50);
    color: var(--white);
    border-radius: 20%;
    vertical-align: text-bottom;
  }

  p {
    font-size: var(--font-size-02);
    color: var(--content-secondary);
  }

  strong {
    font-size: var(--font-size-02);
  }

  .labs-experiment-widget-container {
    --image-size: 40px;
    --image-padding: var(--spacing-01);

    display: grid;
    grid-template-columns: var(--image-size) 1fr auto auto;
    gap: var(--spacing-07);
    align-items: center;
    padding: var(--spacing-05);

    .experiment-logo-container {
      padding: var(--image-padding);
    }

    .labs-experiment-icon {
      padding: var(--spacing-03);
      color: var(--green-70);
      font-size: 24px;
    }

    img {
      width: calc(var(--image-size) - var(--image-padding) * 2);
      height: calc(var(--image-size) - var(--image-padding) * 2);
    }

    .title-row {
      margin: 0;
      margin-bottom: var(--spacing-04);
      align-items: center;

      > h3 {
        margin: 0;
        margin-right: var(--spacing-04);
      }
    }

    p {
      margin-bottom: var(--spacing-04);

      &:last-child {
        margin-bottom: 0;
      }
    }

    &.disabled-experiment {
      grid-template-columns: var(--image-size) 3fr auto auto;
    }
  }

  @media (width < 768px) {
    .labs-experiment-widget-container {
      grid-template-columns: 1fr;
    }
  }
}

.labs-opt-in {
  .form-group {
    margin-top: var(--spacing-06);
  }
}

.labs-workbench-logo {
  width: 32px;
  height: 32px;
  padding: var(--spacing-01);

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}