@use "../../wc";

:host {
  @include wc.scrollbars;
  display: flex;
  flex-grow: 1;
  max-height: 100%;
  height: 100%;
  overflow: hidden !important;
  container-type: inline-size;

  .relative {
    position: relative;
    flex-grow: 1;
    max-height: 100%;

    @include wc.container-query(ph) {
      max-width: calc(100% - var(--zn-spacing-narrow-bar));
    }

    @include wc.container-query(lg) {
      max-width: calc(100% - var(--zn-spacing-panel));
    }

    @include wc.container-query(zero, ph) {
      min-height: 0;
    }
  }

  .container {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    flex: 1;

    @include wc.container-query(ph) {
      flex-direction: row;
    }

  }

  #primary-content, .sidebar {
    max-height: 100%;
    max-width: 100%;
  }

  #primary-content {
    flex-grow: 1;
    min-height: 100px;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    @include wc.gap;
    @include wc.padding;
  }


  .sidebar {
    width: 100%;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;

    @include wc.container-query(ph) {
      min-width: var(--zn-spacing-narrow-bar);
      max-width: var(--zn-spacing-narrow-bar);
    }

    @include wc.container-query(ph) {
      flex-direction: row;
    }

    #content {
      @include wc.padding;
      background: rgb(var(--zn-body));

      display: none;
      z-index: 5;
      overflow-y: auto;
      overflow-x: hidden;


      position: absolute;
      right: 0;
      left: 0;
      top: var(--zn-spacing-narrow-bar);
      bottom: 0;
      flex-grow: 1;

      @include wc.container-query(ph) {
        position: relative;
        inset: 0;
      }


      @include wc.container-query(lg) {
        padding-left: var(--zn-spacing-medium, 0);
      }
    }

    #expander {
      cursor: pointer;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-bottom-width: 1px;
      height: var(--zn-spacing-narrow-bar);
      width: 100%;
      background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
      z-index: 20;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      @include wc.container-query(ph) {
        height: unset;
        flex-direction: column;
        justify-content: start;
        min-width: var(--zn-spacing-narrow-bar);
        max-width: var(--zn-spacing-narrow-bar);
        width: var(--zn-spacing-narrow-bar);
        border-bottom-width: 0;
        border-left-width: 1px;
        padding-bottom: var(--zn-spacing-narrow-bar);
      }

      @include wc.container-query(lg) {
        display: none;
      }

      span {
        writing-mode: horizontal-tb;
        flex-grow: 1;
        padding-left: var(--zn-spacing-medium);
        display: none;

        @include wc.container-query(ph) {
          writing-mode: vertical-rl;
        }

        @include wc.container-query(ph) {
          padding-left: 0;
        }

        &.open {
          display: block;
        }
      }

      zn-icon {
        color: rgb(var(--zn-text));
        margin-left: var(--zn-spacing-medium);
        margin-right: var(--zn-spacing-medium);
        transition: all 500ms ease-in-out;
        rotate: 0;

        @include wc.container-query(ph) {
          margin-top: var(--zn-spacing-medium);
          margin-bottom: var(--zn-spacing-medium);
          rotate: 90deg;
        }
      }
    }
  }
}

:host([flush]) {
  #primary-content {
    padding: 0;
  }
}

:host([open]) {

  .relative {
    @include wc.container-query(ph) {
      max-width: calc(100% - var(--zn-spacing-panel));
    }
  }

  .sidebar {
    @include wc.container-query(ph) {
      min-width: var(--zn-spacing-panel);
      max-width: var(--zn-spacing-panel);
      width: var(--zn-spacing-panel);
    }

    &--wide {
      @include wc.container-query(ph) {
        min-width: var(--zn-spacing-lside);
        max-width: var(--zn-spacing-lside);
        width: var(--zn-spacing-lside);
      }
    }

    #expander {
      zn-icon {
        rotate: -180deg;
        @include wc.container-query(ph) {
          rotate: -90deg;
        }
      }

      &.open {
        display: none;
      }

      &.close {
        display: none;
        @include wc.container-query(ph) {
          display: block;
        }
      }

      &.close-sm {
        display: block;
        font-weight: 500;
        @include wc.container-query(ph) {
          display: none;
        }
      }
    }

    #content {
      display: block;
    }
  }
}

@include wc.container-query(lg) {
  :host .sidebar {
    min-width: var(--zn-spacing-panel);
    max-width: var(--zn-spacing-panel);
    width: var(--zn-spacing-panel);

    &--wide {
      min-width: var(--zn-spacing-lside);
      max-width: var(--zn-spacing-lside);
      width: var(--zn-spacing-lside);
    }

    #content {
      display: block;
    }
  }

  :host(:not([distinct])) {
    .sidebar {
      background: transparent;

      #content {
        background: transparent;
        padding-left: 0;
      }
    }
  }
}

:host([distinct]) {
  .sidebar {
    #content {
      background: rgba(var(--zn-panel), var(--zn-panel-opacity));
    }

    @include wc.container-query(ph) {
      border-left-width: 1px;
    }

    @include wc.container-query(ph, lg) {
      #content {
        padding-left: 0;
      }
    }

    #expander {
      border-left-width: 0;
    }
  }
}

:host #sidebar #content slot {
  @include wc.page-content;
}