@keyframes moveAndBack {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(2px, -2px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.lbaic-settings-table-card {
  --lbaic-settings-table-columns: 181px;

  &-wrapper {
    --lbaic-settings-table-card-grid: 36px 120px 120px 1fr 120px 120px;
    white-space: nowrap;
    display: block;
    @include max-width($lbaic-settings-wp-xxl-breakpoint) {
      display: none;
    }

    &-mobile {
      display: block;
      @include min-width($lbaic-settings-wp-xxl-breakpoint) {
        display: none;
      }

      .lbaic-settings-table-card-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;

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

        @include max-width($lbaic-settings-wp-breakpoint) {
          grid-template-columns: repeat(2, 1fr);
        }

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

  & {
    width: 100%;
    display: grid;
    grid-template-columns: var(--lbaic-settings-table-card-grid);
    color: var(--lbaic-settings-table-card-body-color);

    &-db {
      &-item {
        display: flex;
        align-items: center;

        &-i {
          width: 14px;
          height: 14px;
          flex: 0 0 14px;
          display: block;
          margin-inline-end: 5px;
          fill: currentColor;
        }
      }
    }

    @include max-width($lbaic-settings-wp-xl-breakpoint) {
      display: block;
    }
  }

  &-header {
    display: contents;
    grid-column: 1 / 7;
    grid-row: 1;

    &-in {
      width: 100%;
      min-width: 600px;
      display: contents;
    }

    &-item {
      min-width: 0;
      padding-block: 4px;
      padding-inline: 8px;
      text-align: left;
      vertical-align: middle;
      display: flex;
      align-items: center;

      &-in {
        display: flex;
      }

      &-arrow {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        display: block;
        margin-block: auto;
        fill: currentColor;
        opacity: var(--lbaic-settings-item-arrow-opacity, 0);
        transition: opacity 300ms ease-in-out;
      }

      &.sortable {
        cursor: pointer;
      }

      &.desc {
        --lbaic-settings-item-arrow-opacity: 1;
      }

      &.asc {
        --lbaic-settings-item-arrow-opacity: 1;

        .lbaic-settings-table-card {
          &-header {
            &-item {
              &-arrow {
                transform: scaleY(-1);
              }
            }
          }
        }
      }

      &:first-child {
        padding-inline-start: 0;
        justify-content: flex-start;
      }

      &:last-child {
        padding-inline-end: 0;
      }
    }

    &-label {
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-400);
      color: var(--lbaic-settings-table-card-header-color);
      line-height: var(--lbaic-settings-lh-20);
      white-space: pre-wrap;
    }
  }

  &-body {
    display: contents;
    grid-column: 1 / 7;
    @include max-width($lbaic-settings-wp-xl-breakpoint) {
      display: block;
    }

    &-in {
      width: 100%;
      min-width: 600px;
      display: contents;

      &.error .lbaic-settings-table-card-body-item:first-child {
        --lbaic-settings-table-row-left-border-color: #FF303A;
      }

      &.warning .lbaic-settings-table-card-body-item:first-child {
        --lbaic-settings-table-row-left-border-color: #FFA50C;
      }

      &.error, &.warning {
        .lbaic-settings-table-card-body-item:first-child {
          position: relative;
          border-bottom-left-radius: 3px;

          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background-color: var(--lbaic-settings-table-row-left-border-color, unset);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
          }
        }
      }

      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        position: relative;
        margin-block-end: 10px;
        border: 1px solid var(--lbaic-settings-table-card-item-border);
        border-radius: 6px;
      }

      &-status {
        display: none;
      }

      .lbaic-settings-error-i {
        fill: var(--lbaic-settings-a-ei-error-color);

        &:hover {
          cursor: pointer;
          fill: var(--lbaic-settings-a-ei-error-hover);
        }
      }

      .lbaic-settings-warning-i {
        fill: var(--lbaic-settings-a-ei-warning-color);

        &:hover {
          cursor: pointer;
          fill: var(--lbaic-settings-a-ei-warning-hover);
        }
      }
    }

    &-item {
      width: 100%;
      min-width: 0;
      padding-inline: 8px;
      text-align: left;
      vertical-align: middle;
      display: flex;
      align-items: center;

      &:first-child {
        justify-content: flex-start;
      }

      @include min-width($lbaic-settings-wp-xxl-breakpoint) {
        padding-block: 14px;
        transition: background-color 180ms ease-in-out;
        background-color: var(--lbaic-settings-table-card-body-bg, transparent);
        border-bottom: 1px solid var(--lbaic-settings-table-card-border);
      }

      @include max-width($lbaic-settings-wp-xxl-breakpoint) {
        min-width: 0;
        flex: 0 0 33.3%;
        padding-block: 14px;
        text-align: right;

        &:before {
          content: attr(data-title);
          display: block;
          font-size: var(--lbaic-settings-fs-14);
          color: var(--lbaic-settings-table-card-header-color);
          line-height: var(--lbaic-settings-lh-16);
        }
      }

      &-in {
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .lbaic-settings-chip {
        padding: 4px 6px;

        &-label {
          font-size: var(--lbaic-settings-fs-12);
          font-weight: var(--lbaic-settings-fw-400);
          color: var(--lbaic-settings-kb-table-column-color);
        }

        &-i {
          fill: var(--lbaic-settings-kb-table-column-color);
        }
      }

      &:first-child {
        padding-inline-start: 0;
      }

      &:last-child {
        padding-inline-end: 0;
      }


      &.lbaic-settings-disabled {
        opacity: 1;
        pointer-events: auto;
        user-select: none;

        & > div {
          & > * {
            opacity: .3;
            pointer-events: none;
          }

          .lbaic-settings-table-card-body-label-actions {
            opacity: 1;
            pointer-events: auto;
          }
        }
      }
    }

    &-label {
      display: block;
      font-size: var(--lbaic-settings-fs-14);
      color: var(--lbaic-settings-table-card-body-color);
      line-height: var(--lbaic-settings-lh-20);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        max-width: 100%;
      }

      &-null {
        opacity: 0.2;
      }

      &.warning {
        color: var(--lbaic-settings-table-card-warning);
      }

      &-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2px;
      }
    }

    &-i {
      width: 12px;
      height: auto;
      flex: 0 0 12px;
      display: block;
      fill: currentColor;
    }

    &-type {
      &-in {
        max-width: max-content;
        padding: 2px 6px;
        background-color: #e7e6e670;
        border-radius: 5px;
      }

      &-label {
        font-size: var(--lbaic-settings-fs-12);
        font-weight: var(--lbaic-settings-fw-400);
        color: var(--lbaic-settings-table-card-header-color);
      }
    }

    &-input {
      &-in {
        gap: 2px;

        .lbaic-settings-tooltip-i {
          width: 14px;
          height: 14px;
        }
      }

      .lbaic-settings-table-card-body-label {
        font-weight: var(--lbaic-settings-fw-400);
        line-height: var(--lbaic-settings-lh-20);
        white-space: pre-wrap;

        &-edit {
          white-space: nowrap;
        }
      }

      &-parent {
        .lbaic-settings-table-card-body-input-link-in, .lbaic-settings-table-card-body-label {
          white-space: nowrap;
        }
      }

      &-label {
        max-width: 100%;
      }

      &-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--lbaic-settings-table-card-body-color);
        max-width: 100%;

        &.secondary {
          color: inherit;
        }

        &-in {
          font-weight: var(--lbaic-settings-fw-500);
          line-height: var(--lbaic-settings-lh-22);
          white-space: pre-wrap;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        &.secondary .lbaic-settings-table-card-body-input-link-in {
          font-weight: var(--lbaic-settings-fw-400);
          font-size: var(--lbaic-settings-fs-13);
          line-height: var(--lbaic-settings-lh-16);
        }
        &:hover {
          .lbaic-settings-external-arrow {
            animation: moveAndBack 0.6s ease;
          }
        }
      }

      &-i {
        width: 20px;
        flex: 0 0 20px;
        transition: opacity 300ms ease-in-out;
      }

      &-parent {
        .lbaic-settings-table-card-body-label {
          font-weight: var(--lbaic-settings-fw-500);
          line-height: inherit;
        }
      }
    }

    &-storage {
      &-in {
        max-width: max-content;
        padding: 2px 6px;
        background-color: #e7e6e670;
        border-radius: 5px;

        &:not(:last-of-type) {
          margin-block-end: 4px;
        }
      }

      &-label {
        font-size: var(--lbaic-settings-fs-12);
        font-weight: var(--lbaic-settings-fw-500);
      }

      .lbaic-settings-chip-label {
        opacity: 1;
      }
    }

    &-details {
      display: none;

      &-list {
        min-height: 24px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-block-end: 10px;

        &-in {
          display: flex;
          align-items: center;
        }

        .lbaic-settings-chip-label {
          font-size: var(--lbaic-settings-fs-12);
          font-weight: var(--lbaic-settings-fw-400);
          color: var(--lbaic-settings-kb-table-column-color);
          opacity: 1;
        }

        .lbaic-settings-chip-i {
          fill: var(--lbaic-settings-kb-table-column-color);
        }

      }

      &-label {
        &-in {
          font-size: var(--lbaic-settings-fs-14);
          line-height: var(--lbaic-settings-lh-18);
          font-weight: var(--lbaic-settings-fw-700);
        }
      }
    }

    &-last-updated {
      .lbaic-settings-table-card-body-label {
        white-space: pre-wrap;
      }

      .lbaic-settings-chip-label {
        opacity: 1;
      }
    }

    .lbaic-settings-table-accordion-body-in {
      &:hover:not(&.active) {
        --lbaic-settings-table-bg: var(--lbaic-settings-table-card-hover-bg);

        .lbaic-settings-table-card-body-item:not(.lbaic-settings-disabled) {
          .lbaic-settings-table-card-actions-edit {
            opacity: 1;
          }
        }
      }
    }
  }

  &-checkbox {
    width: 36px;
    justify-content: center;

    @include min-width($lbaic-settings-wp-xl-breakpoint) {
      padding-inline: 16px 2px;
    }
  }

  &-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    &-in {
      width: 24px;
      height: 24px;
      padding-inline: 0;
      border: none;

      &:hover {
        background-color: var(--lbaic-settings-button-bg-hover);
      }

      &:active {
        background-color: var(--lbaic-settings-button-bg-active);
      }

      &:first-child:last-child {
        margin-inline-start: auto;
      }
    }

    &-label {
      font-size: var(--lbaic-settings-fs-10);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-table-card-body-color);
      line-height: var(--lbaic-settings-lh-16);
    }

    &-edit {
      width: auto;
      height: 16px;
      flex: 0 0 auto;
      padding: 0;
      opacity: 0;
      transition: opacity 300ms ease-in-out;

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

        &.rotate {
          transform: rotate(270deg);
        }
      }

      &:active {
        --lbaic-settings-button-active-opacity: 0;
      }
    }

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

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

    &-mis {
      &-auto {
        margin-inline-start: auto;
      }
    }
  }

  &-status {
    &-i {
      position: relative;
      width: 24px;
      height: auto;
      display: block;
    }
  }

  &-kb {
    &-items {
      --lbaic-settings-table-card-grid: 36px 1fr minmax(100px, auto) minmax(100px, auto) minmax(100px, auto) minmax(102px, auto) minmax(44px, auto);
      --lbaic-settings-table-card-grid-details-columns: 1 / 8;

      &-entries {
        --lbaic-settings-table-card-grid: 36px 1fr minmax(100px, 200px) minmax(100px, auto) minmax(100px, auto) minmax(44px, auto);
        --lbaic-settings-table-card-grid-details-columns: 1 / 7;
      }
    }

    &-recommendations {
      &-items {
        --lbaic-settings-table-card-grid: 36px 1fr minmax(100px, auto) minmax(100px, auto) minmax(100px, auto) minmax(102px, auto) minmax(44px, auto);
        --lbaic-settings-table-card-grid-details-columns: 1 / 8;
      }
    }

    &-storage {
      --lbaic-settings-table-card-grid: 120px 1fr 1fr 100px 100px minmax(44px, auto);
    }

    &-qas {
      --lbaic-settings-table-card-grid: 36px 60px 1fr 120px 120px minmax(44px, auto);
    }

    &-my-models {
      --lbaic-settings-table-card-grid: 60px 1fr 1fr 1fr 120px minmax(44px, auto);
    }
  }

  &-dataset {
    &-entries {
      --lbaic-settings-table-card-grid: 1fr minmax(100px, 160px) minmax(100px, auto);
      --lbaic-settings-table-card-grid-details-columns: 1 / 4;
    }
  }

  &-has-details {
    .lbaic-settings-table-accordion-details.opened {
      display: block;
      grid-column: var(--lbaic-settings-table-card-grid-details-columns, 1 / 8);
    }

    .lbaic-settings-table-card-body-item {
      justify-content: center;
      flex-direction: column;
      gap: 2px;

      &:not(:first-child) {
        align-items: flex-start;
      }

      &:first-child {
        align-items: flex-start;
      }
    }
  }

  &-mobile {
    &-header {
      &-in {
        min-width: 0;
        display: flex;
        justify-content: space-between;
        padding-block-end: 10px;
        padding-inline: 21px;
      }
    }

    &-body {
      &-in {
        position: relative;
        width: 100%;
        min-width: 0;
        padding-block: 10px;
        padding-inline: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid var(--lbaic-settings-table-card-item-border);
        border-radius: 6px;
        margin-block-end: 0;

        //&:before {
        //  content: "";
        //  position: absolute;
        //  top: 0;
        //  left: 0;
        //  width: 3px;
        //  height: 100%;
        //  background-color: red;
        //  border-top-left-radius: 2px;
        //  border-bottom-left-radius: 2px;
        //}

        @include min-width($lbaic-settings-wp-breakpoint) {
          width: 100%;
        }


        &.lbaic-settings-table-card-mobile-clickable {
          cursor: pointer;
          transition: background-color 180ms ease-in-out;

          &:hover {
            background-color: var(--lbaic-settings-table-card-hover-bg);
          }
        }

      }

      &-details {
        margin-block-start: 10px;
        margin-inline: 20px;
        padding: 15px;
        background-color: var(--lbaic-settings-table-card-details-bg, #f8f9fa);
        border: 1px solid var(--lbaic-settings-table-card-item-border);
        border-radius: 6px;
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        .lbaic-settings-table-accordion-content {
          padding: 0;
        }
      }

      &-item {
        width: 100%;
        display: flex;
        justify-content: space-between;

        &:not(:first-child):not(:last-child) {
          padding-block: 5px;
        }

        .lbaic-settings-checkbox-wrapper {
          display: flex;
        }

        .lbaic-settings-table-card {
          &-header {
            &-item {
              padding-inline: 0;
            }
          }

          &-body {
            &-item {
              width: auto;
              max-width: 80%;
              flex: none;
              padding-block: 0;
            }

            &-input {
              &-link {
                &-in {
                  display: flex;
                  align-items: center;
                }
              }

              &-in {
                .lbaic-settings-error-i {
                  fill: var(--lbaic-settings-a-ei-error-color);

                  &:hover {
                    cursor: pointer;
                    fill: var(--lbaic-settings-a-ei-error-hover);
                  }
                }

                .lbaic-settings-warning-i {
                  fill: var(--lbaic-settings-a-ei-warning-color);

                  &:hover {
                    cursor: pointer;
                    fill: var(--lbaic-settings-a-ei-warning-hover);
                  }
                }
              }
            }

            &-i {
              opacity: 1;
            }

            &-label {
              font-size: var(--lbaic-settings-fs-12);
            }
          }

          &-actions-edit {
            opacity: 1;
          }
        }

        .lbaic-settings-table-card-body-input {
          @include min-width($lbaic-settings-wp-breakpoint) {
            max-width: 70%;
          }
        }

        .lbaic-settings-table-card-checkbox {
          width: max-content;
          padding: 0;
        }

        .lbaic-settings-table-card-body-actions {
          width: max-content;
          margin-inline-start: auto;
        }

        .lbaic-settings-table-card-header-item {

          &-arrow {
            display: none;
          }
        }

        &.lbaic-settings-disabled {
          opacity: 1;
          pointer-events: auto;
          user-select: none;

          & > .lbaic-settings-table-card-header-item, .lbaic-settings-table-card-body-item {
            & > div {
              > * {
                opacity: .3;
                pointer-events: none;
              }
            }

            .lbaic-settings-table-card-body-label-actions {
              opacity: 1;
              pointer-events: auto;
            }
          }
        }

      }

    }
  }

  &-details {
    &-footer {
      &-in {
      }
    }
  }
}