@use './mixins' as mixins;
@use './variables' as variables;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('body') {
  --sky-override-tabset-padding-xs-breakpoint: 10px;
}

// xs breakpoint
.sky-layout-host {
  &-blocks,
  &-list,
  &-tabs {
    display: block;

    --sky-layout-host-links-spacing: var(--sky-margin-stacked-xl)
      var(--sky-margin-inline-sm);

    .sky-margin-stacked-xl:empty {
      margin-bottom: 0;
    }

    &:has(> sky-page-content):has(> sky-page-links) {
      display: grid;
      grid-template:
        'header'
        'content'
        'links';
      grid-template-columns: 1fr;

      > sky-page-header {
        grid-area: header;
      }

      > sky-page-content {
        grid-area: content;
      }

      > sky-page-links {
        grid-area: links;
      }
    }
  }

  &-list,
  &-tabs {
    &:has(> sky-page-content):has(> sky-page-links) {
      > sky-page-content {
        margin-right: var(--sky-margin-inline-xl);
      }
    }
  }

  &-fit,
  &-for-child-fit {
    position: absolute;
    top: var(--sky-viewport-top);
    right: var(--sky-viewport-right);
    bottom: var(--sky-viewport-bottom);
    left: var(--sky-viewport-left);
    display: flex;
    flex-direction: column;

    --sky-layout-host-header-flex-grow: 0;
    --sky-layout-host-content-flex-grow: 1;
    --sky-layout-host-content-overflow: auto;
    --sky-layout-host-content-position: relative;
    --sky-layout-host-links-display: none;
  }

  &-blocks,
  &-list,
  &-fit,
  &-tabs {
    --sky-layout-host-header-spacing: 20px 10px;
  }

  &-blocks {
    --sky-layout-host-content-spacing: 10px;
  }

  &-fit,
  &-list {
    --sky-layout-host-content-spacing: 0 10px;
  }

  &-tabs {
    --sky-layout-host-content-spacing: 0;
    --sky-layout-host-tab-content-spacing: var(
      --sky-override-tabset-padding-xs-breakpoint,
      var(--sky-space-inset-tabs-s)
    );
  }

  &-none {
    --sky-layout-host-links-display: none;
  }
}

@include mixins.sky-host-responsive-container-sm-min(false) {
  .sky-layout-host {
    &-blocks,
    &-list,
    &-tabs {
      &:has(> sky-page-content):has(> sky-page-links) {
        --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);

        > sky-page-header,
        .sky-page-header,
        .sky-page-header-info,
        .sky-page-header-text-and-content {
          grid-area: unset;
          display: contents;
        }

        sky-page-header-alerts {
          grid-area: header-alerts;
          margin: var(--sky-layout-host-header-spacing);
        }

        sky-page-header-avatar {
          grid-area: header-avatar;
          margin: var(--sky-layout-host-header-spacing);
          margin-top: 0;
          margin-right: 0;
        }

        h1.sky-page-header-text {
          grid-area: header-text;
          margin: var(--sky-layout-host-header-spacing);
          margin-top: 0;
          margin-bottom: 0;
        }

        div.sky-page-header-content {
          grid-area: header-content;
          margin: var(--sky-layout-host-header-spacing);
          margin-top: 0;
        }

        grid-template:
          'header-alerts header-alerts  header-alerts'
          'header-avatar header-text    header-text'
          'header-avatar header-content links'
          'content       content        links';
        grid-template-rows:
          minmax(var(--sky-margin-stacked-xl), min-content)
          minmax(var(--sky-margin-stacked-xl), min-content)
          minmax(var(--sky-margin-stacked-xl), min-content)
          auto;
        grid-template-columns: 0 75% 25%;

        &:has(sky-page-header-avatar:not(:empty)) {
          --sky-layout-host-header-avatar-size: calc(
            120px + var(--sky-margin-inline-xl)
          );
          grid-template-columns:
            var(--sky-layout-host-header-avatar-size)
            calc(75% - var(--sky-layout-host-header-avatar-size))
            25%;

          h1.sky-page-header-text {
            margin: 0;
          }

          div.sky-page-header-content {
            margin-left: 0;
          }
        }
      }
    }
  }

  .sky-layout-host {
    &-blocks {
      --sky-layout-host-header-spacing: 20px 20px 0 20px;
      --sky-layout-host-content-spacing: 20px;
    }

    &-fit,
    &-list {
      --sky-layout-host-header-spacing: 20px;
      --sky-layout-host-content-spacing: 0 20px;
    }

    &-tabs {
      --sky-layout-host-header-spacing: 20px;
      --sky-layout-host-tab-content-spacing: 20px;
    }
  }
}

.sky-theme-modern {
  @include mixins.sky-host-responsive-container-sm-min(false) {
    .sky-layout-host {
      &-blocks {
        --sky-layout-host-header-spacing: 30px 30px 0 30px;
        --sky-layout-host-content-spacing: 30px;
      }

      &-fit,
      &-list,
      &-tabs {
        --sky-layout-host-header-spacing: 30px 30px 20px 30px;
      }

      &-fit,
      &-list {
        --sky-layout-host-content-spacing: 0 30px;
      }

      &-tabs {
        --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
      }
    }
  }
}
