overleaf/services/web/frontend/stylesheets/modules/labs.less

.labs-opt-in-wrapper {
  color: @ol-blue-gray-3;

  h1,
  h2,
  h3,
  h4 {
    color: @ol-blue-gray-3;
  }

  #experiments-container {
    .title-row {
      display: flex;
    }
    .labs-experiment-widget-container {
      border: 1px solid @gray-lighter;
    }
  }
  .labs-icon {
    background-color: @green-50;
    color: @white;
    border-radius: 20%;
    vertical-align: text-bottom;
  }
  p {
    font-size: @font-size-small;
  }
  strong {
    font-size: @font-size-small;
  }

  .labs-experiment-widget-container {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 10px;

    > div {
      display: flex;
      flex-direction: column;
      padding-right: 20px;

      &:last-child {
        padding-right: 0px;
      }
    }

    img {
      width: 36px;
      height: 36px;
    }

    .title-row {
      margin: 0;
      margin-bottom: 10px;

      > h3 {
        margin: 0;
        margin-right: 10px;
      }
    }

    p {
      margin-bottom: 10px;

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

  @media (max-width: @screen-xs-max) {
    .labs-experiment-widget-container {
      grid-template-columns: 1fr;
    }
  }
}

.labs-experiment-widget-container.disabled-experiment {
  grid-template-columns: 40px 3fr 1fr auto;

  .disabled-explanation {
    color: @content-secondary;
  }

  h3,
  p {
    color: @content-disabled;
  }
}

.disabled-experiment {
  .ai-error-assistant-avatar {
    filter: grayscale(0.6);
  }
}