.lbaic-settings-e {
  &-oaic {
    &-grid {
      display: grid;
      gap: 24px;
      padding-block-end: 24px;

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        grid-template-columns: 1fr 1fr;
      }
    }

    &-item {
      --lbaic-settings-e-oaic-item-bg: var(--lbaic-settings-e-oaic-item-default-bg);
      --lbaic-settings-e-oaic-item-border: var(--lbaic-settings-e-oaic-item-default-border);

      position: relative;
      width: 100%;
      padding-block: 10px;
      padding-inline: 16px;
      background-color: var(--lbaic-settings-e-oaic-item-bg);
      border: 1px solid var(--lbaic-settings-e-oaic-item-border);
      border-radius: 6px;
      transition: background-color 180ms ease-in-out, border-color 180ms ease-in-out;
      cursor: pointer;
      overflow: hidden;

      &:hover {
        --lbaic-settings-e-oaic-item-bg: var(--lbaic-settings-e-oaic-item-hover-bg);
        --lbaic-settings-e-oaic-item-border: var(--lbaic-settings-e-oaic-item-active-border);
        --lbaic-settings-e-oaic-item-active-events: auto;
        --lbaic-settings-e-oaic-item-highlight-opacity: 1;

      }

      &.active{
        --lbaic-settings-e-oaic-item-bg: rgba(69, 140, 246, 0.102);
      }

      &-header {
        position: relative;
        display: flex;
        align-items: center;
        padding-block-end: 10px;
        z-index: 1;

        &-in {
          min-width: 0;
          flex: 1 0 0;
          padding-inline-end: 8px;
        }

        &-label {
          max-width: 100%;
          display: block;
          font-size: var(--lbaic-settings-fs-14);
          font-weight: var(--lbaic-settings-fw-500);
          color: var(--lbaic-settings-e-oaic-item-header-color);
          line-height: var(--lbaic-settings-lh-20);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      &-actions {
        display: flex;
        flex: 0 0 auto;

        &-in {
          width: 16px;
          height: 16px;
          color: rgba(var(--lbaic-settings-black-rgb), 1);

          &:not(:last-child) {
            margin-inline-end: 16px;
          }
        }

        &-i {
          width: 100%;
          height: auto;
          display: block;
          fill: currentColor;
        }

        &-checked {
          color: var(--lbaic-settings-e-oaic-item-checked);
          //opacity: var(--lbaic-settings-e-oaic-item-active-opacity, 0);
          pointer-events: var(--lbaic-settings-e-oaic-item-active-events, none);
        }
      }

      &-body {
        position: relative;
        z-index: 1;
      }

      &-desc {
        font-size: var(--lbaic-settings-fs-14);
        font-weight: var(--lbaic-settings-fw-500);
        color: var(--lbaic-settings-e-oaic-item-desc-color);
        line-height: var(--lbaic-settings-lh-20);
        opacity: 0.6;

        &:not(:last-child) {
          margin-block-end: 6px;
        }

        &.api-key {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          word-break: break-all;
          overflow: hidden;
        }
      }
    }
  }
}