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

:host {
  display: block;
}

// TODO, update scss to match this bit and not the below
.header {
  flex-grow: 1;

  // This isn't correct fix this also
  .caption {
    //padding: var(--zn-spacing-small) 0;
    justify-content: space-between;
    gap: var(--zn-spacing-2x-small);
    max-width: 100%;
  }

  &__caption {
    font-weight: var(--zn-font-weight-medium);
    font-size: var(--zn-font-size-x-large);
    color: rgba(var(--zn-text-panel-title), 100%);
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    gap: var(--zn-spacing-x-small);
    align-items: center;
    text-wrap: auto;
  }

  &--has-breadcrumb {
    .caption {
      padding-top: 0;
    }
  }

  // remove the padding on the nav
  &--has-nav {
    .caption {
      padding-bottom: 0;
    }
  }
}

.caption__back {
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit;
}

.content {
  padding: var(--zn-spacing-x-small) 0;
}

:host([transparent]) > div {
  background-color: transparent;
}

:host([with-closer]) .content {
  padding-right: 40px;
}

:host([navigation]) > div {
  h1 {
    padding-bottom: 0;
  }
}

:host #nav-container {
  gap: 0;
}

.alt-overlay {
  display: none;
}

:host(.alt-pressed) {
  .alt-overlay:empty {
    display: none !important;
  }

  .alt-overlay {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    position: absolute;
    left: 0;
    top: 10px;
    padding: 6px 15px;
    background: rgba(var(--zn-panel), 0.95);
    z-index: 10;

    a {
      display: flex;
    }

    zn-icon:hover {
      color: rgb(var(--zn-primary));
      cursor: pointer;
    }
  }
}


.header {
  display: flex;
  flex-direction: column;
  border-bottom-width: 1px;
  // border-top-width: 1px;
  overflow: hidden;
  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));

  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    gap: 10px;
    margin: 0 auto;
    padding-left: var(--zn-spacing-medium);
    padding-right: var(--zn-spacing-medium);
  }

  &__left {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    min-height: 43px;
    flex-shrink: 1;
    max-width: 100%;
  }

  &__right {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    min-width: 20px;
  }

  &__description {
    display: contents;
    font-size: var(--zn-font-size-medium);
    line-height: 28px;
  }

  .navless {
    min-height: 10px;
  }

  .content {
    position: relative; // For use on expanding actions
    gap: 10px;
  }

  .breadcrumb {
    flex-basis: 100%;
    font-size: var(--zn-font-size-x-small);
    font-weight: var(--zn-font-weight-semibold);
    color: rgb(var(--zn-text));

    display: flex;
    align-items: center;
    gap: var(--zn-spacing-2x-small);

    &::slotted(a) {
      font-size: 0.875rem;
      color: inherit;
      font-weight: var(--zn-font-weight-normal);
      text-decoration: inherit;
    }

    &::slotted(a:hover) {
      color: rgb(var(--zn-primary));
    }

    &::slotted(a:not(:last-of-type))::after {
      content: '>';
      margin-left: var(--zn-spacing-2x-small);
      color: rgb(var(--zn-text-muted));
    }
  }


  .caption {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;

    a {
      display: flex;
      align-items: center;
      color: inherit;
      text-decoration: none;
    }

    a zn-icon {
      cursor: pointer;

      &:hover {
        color: rgb(var(--zn-primary));
      }
    }
  }

  h1 {
    flex-grow: 1;
    font-size: 18px;

    overflow: hidden;
    text-overflow: ellipsis;

    color: rgb(var(--zn-text-page-title));
    margin: 0;
    font-weight: var(--zn-font-weight-medium);

    @media screen and (min-width: var(--zn-container-lg)) {
      font-size: var(--zn-font-size-x-large);
    }

    &:empty {
      display: none;
    }
  }

  slot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--zn-spacing-x-small);
    word-break: break-word;
  }

  slot[name="nav"] {
    flex-basis: 100%;
  }

  slot[name="actions"] {
    justify-content: end;
    flex-wrap: nowrap;
  }

  slot[name="actions"]::slotted(zn-button-menu) {
    flex-grow: 1;
    flex-shrink: 1;
  }

  .actions {
    display: flex;
  }
}

:host([baseless]) {
  .header {
    border-bottom: none !important;
  }
}