@use 'sass:list';
@use 'sass:selector';
@use 'sass:string';

@mixin _aside() {
  flex-basis: var(--unitone--sidebar-width);
  flex-grow: 1;
  min-width: 1rem;
}

@mixin _main() {
  flex-basis: 0;
  flex-grow: 999;
  min-width: min(100%, var(--unitone--content-min-width));
  max-width: min(100%, var(--unitone--content-max-width));
}

$selector-main-aside: (
  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:right"]',
  ':not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar:left"])',
  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:left"]'
);

$selector-aside-main: (
  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:left"]',
  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:right"]',
  '[data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar:left"])'
);

$selector-right-sidebar: (
  '[data-unitone-layout~="-sidebar:right"]',
  ':not([data-unitone-layout~="-sidebar:left"])'
);

$selector-left-sidebar: (
  '[data-unitone-layout~="-sidebar:left"]',
);

@mixin abstract-with-sidebar() {
  --unitone--sidebar-width: auto;
  --unitone--content-min-width: 50%;
  --unitone--content-max-width: 100%;
  --unitone--gap: var(--unitone--global--gap);
  --unitone--column-gap: var(--unitone--gap);
  --unitone--row-gap: var(--unitone--gap);
  --unitone--align-items: stretch;
  --unitone--overflow: visible;

  display: flex;
  flex-wrap: wrap;
  column-gap: var(--unitone--column-gap);
  row-gap: var(--unitone--row-gap);
  align-items: var(--unitone--align-items);
  overflow: var(--unitone--overflow);

  &:where(#{ $selector-main-aside }) > :first-child,
  &:where(#{ $selector-aside-main }) > :nth-child(2) {
    @include _main();
  }

  &:where(#{ $selector-main-aside }) > :nth-child(2),
  &:where(#{ $selector-aside-main }) > :first-child {
    @include _aside();
  }

  &[data-unitone-layout~="-revert"] {
    flex-direction: row-reverse;
  }

  &:where([data-unitone-layout*="-divider\:"]) {
    --unitone--divider-width: 1px;
    --unitone--divider-style: solid;
    --unitone--divider-color: var(--unitone--color--gray);

    visibility: hidden;

    &[data-unitone-layout~="divider:initialized"] {
      visibility: visible;
    }

    > * {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: var(--unitone--align-items);
    }

    > ::before {
      content: '';
      position: absolute;
      inset: 0;
      user-select: none;
      pointer-events: none;
      border-width: 0;
      border-style: var(--unitone--divider-style);
      border-color: var(--unitone--divider-color);
    }

    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      // When -bol / -linewrap is added, the vertical/horizontal layout may switch.
      // This will break the design.
      // This is necessary to prevent this.
      --unitone--content-min-width: 100% !important;
    }
  }

  &[data-unitone-layout~="-divider\:stripe"] {
    align-items: stretch;

    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      row-gap: 0;

      &:where(#{ $selector-main-aside }) > :first-child,
      &:where(#{ $selector-aside-main }) > :nth-child(2) {
        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));

        &::before {
          border-top-width: var(--unitone--divider-width);
          border-bottom-width: var(--unitone--divider-width);
        }
      }

      &:where(#{ $selector-aside-main }) > :first-child {
        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
        padding-bottom: calc(var(--unitone--row-gap));

        &::before {
          border-top-width: var(--unitone--divider-width);
        }
      }

       &:where(#{ $selector-main-aside }) > :nth-child(2) {
        padding-top: var(--unitone--row-gap);
        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));

        &::before {
          border-bottom-width: var(--unitone--divider-width);
        }
      }
    }

    // For horizontal layout.
    &:not([data-unitone-layout~="-stack"]) {
      column-gap: 0;

      > * {
        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
      }

      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
        &::before {
          border-right-width: var(--unitone--divider-width);
          border-left-width: var(--unitone--divider-width);
        }
      }

      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
      &:where([data-unitone-layout~="-revert"]) > :first-child {
        &::before {
          border-right-width: var(--unitone--divider-width);
        }
      }
    }
  }

  &[data-unitone-layout~="-divider\:divide"] {
    align-items: stretch;

    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      row-gap: 0;

      > :first-child {
        &::before {
          border-width: 0 0 var(--unitone--divider-width);
        }
      }

      &:where(#{ $selector-main-aside }) > :first-child {
        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }

      &:where(#{ $selector-main-aside }) > :nth-child(2) {
        padding-top: var(--unitone--row-gap);
      }

      &:where(#{ $selector-aside-main }) > :first-child {
        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }

      &:where(#{ $selector-aside-main }) > :nth-child(2) {
        padding-top: var(--unitone--row-gap);
      }
    }

    // For horizontal layout.
    &:not([data-unitone-layout~="-stack"]) {
      column-gap: 0;

      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));

        &::before {
          border-right-width: var(--unitone--divider-width);
        }
      }

      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
      &:where([data-unitone-layout~="-revert"]) > :first-child {
        padding-left: var(--unitone--column-gap);
      }
    }
  }

  &[data-unitone-layout~="-divider\:slash"] {
    --unitone--divider-height: 2rem;

    gap: 0;
    align-items: stretch;

    > :first-child::before {
      right: auto;
      height: var(--unitone--divider-height);
      border-left-width: var(--unitone--divider-width);
      border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
      transform: rotate(22.5deg);
    }

    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      > :first-child {
        padding-bottom: var(--unitone--row-gap);

        &::before {
          inset:
            100%
            auto
            auto
            calc(50% - var(--unitone--divider-width) / 2);
        }
      }

      > :nth-child(2) {
        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-height));
      }
    }

    // For horizontal layout.
    &:not([data-unitone-layout~="-stack"]) {
      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
        padding-right: var(--unitone--column-gap);

        &::before {
          right: auto;
          bottom: auto;
          left: 100%;
        }
      }

      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
      &:where([data-unitone-layout~="-revert"]) > :first-child {
        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
      }
    }
  }

  &[data-unitone-layout~="-divider\:bordered"] {
    gap: 0;
    align-items: stretch;

    // For vertical layout.
    &[data-unitone-layout~="-stack"] {
      > ::before {
        border-width: var(--unitone--divider-width);
      }

      > :nth-child(2)::before {
        border-top-width: 0;
      }

      &:where(#{ $selector-main-aside }) > :first-child {
        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }

      &:where(#{ $selector-main-aside }) > :nth-child(2) {
        padding:
          var(--unitone--row-gap)
          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }

      &:where(#{ $selector-aside-main }) > :first-child {
        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }

      &:where(#{ $selector-aside-main }) > :nth-child(2) {
        padding:
          var(--unitone--row-gap)
          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
      }
    }

    // For horizontal layout.
    &:not([data-unitone-layout~="-stack"]) {
      > * {
        padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));

        &::before {
          border-width: var(--unitone--divider-width);
        }
      }

      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
      &:where([data-unitone-layout~="-revert"]) > :first-child {
        padding-left: var(--unitone--column-gap);

        &::before {
          border-left: 0;
        }
      }
    }
  }
}

@mixin with-sidebar() {
  [data-unitone-layout~="with-sidebar"] {
    @include abstract-with-sidebar();
  }
}