.lbaic-settings-content {
  position: relative;
  max-width: 1000px;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: 'header' 'body';
  background-color: var(--lbaic-settings-content-bg);

  @include min-width($lbaic-settings-wp-breakpoint) {
    border-radius: 6px;
    box-shadow: var(--lbaic-settings-content-shadow);
  }

  @include max-height(1080px) {
    height: 100%;
  }

  @include min-height(1080px) {
    min-height: 800px;
  }

  &-header {
    position: sticky;
    top: 0;
    left: 0;
    grid-area: header;
    background-color: var(--lbaic-settings-content-bg);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    overflow-x: hidden;
    z-index: 200;
    min-height: 128px;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 100%;
      background-image: var(--lbaic-settings-content-header-bg);
      background-size: auto 176px;
      background-position: right top;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: -1;
    }


    &-in {
      display: flex;
      flex-direction: column;
      padding-block: 24px 12px;
      padding-inline: 16px;

      &:only-child{
        height: 100%;
      }

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

    &-title {
      padding-block-end: 12px;
      font-size: var(--lbaic-settings-fs-20);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-content-title-color);
      line-height: var(--lbaic-settings-lh-24);
    }

    &-sub {
      max-width: 100%;
      margin-block-start: auto;
      font-size: var(--lbaic-settings-fs-13);
      line-height: var(--lbaic-settings-lh-16);
      color: var(--lbaic-settings-content-subtitle-color);

      * {
        color: inherit;
      }
    }
  }

  &-body {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'tabs' 'in';
    grid-area: body;

    &-in {
      grid-area: in;
      display: grid;
      grid-template-rows: 1fr auto;
      grid-template-areas: 'inner' 'footer';
    }

    &-inner {
      position: relative;
      grid-area: inner;
      padding-block: 26px 24px;
      padding-inline: 16px;

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

  &-tabs {
    position: relative;
    display: flex;
    grid-area: tabs;
    //background-color: var(--lbaic-settings-content-bg);
    border-radius: inherit;
    overflow: hidden;
    z-index: 200;
  }

  &-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    grid-area: footer;
    background-color: var(--lbaic-settings-content-footer-bg);
    border-radius: 0 0 6px 6px;
    z-index: 21;

    &-in {
      padding-block: 10px;
      padding-inline: 16px;

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

    &-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 40px;

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        flex-direction: row;
        gap: 8px;
      }

      &-in {
        @include max-width($lbaic-settings-wp-xl-breakpoint) {
          width: 100%;
        }
      }

      &-end {
        margin-inline-end: auto;
      }

      &-close {
        margin-inline: 0 auto;
        @include min-width($lbaic-settings-wp-xl-breakpoint) {
          margin-inline: auto 0;
        }
      }
    }
  }

  &-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--lbaic-settings-white);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    z-index: 20;
  }
}