/*
  main page header

  layout
  commons
  menu toggle
  logo
  login/register
  breadcrumbs
  tools menu
  profile menu
  create menu
*/



/* layout */
/* ================================================================================ */
.pos-community-header {
  min-height: 72px;
  padding-inline: var(--pos-padding-page);
  display: flex;
  align-items: center;
  gap: var(--pos-gap-button-button);

  background-color: var(--pos-color-content-background);
}



/* commons */
/* ================================================================================ */
.pos-community-header-label {
  position: absolute;
  left: -200vw;
}



/* menu toggle */
/* ================================================================================ */
.pos-community-header-menutoggle {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: none;

  cursor: pointer;
}

  .pos-community-header-menutoggle:hover {
    color: var(--pos-color-interactive-hover);
  }

  .pos-community-header-menutoggle:focus-visible {
    outline: 2px solid var(--pos-color-focused);
    outline-offset: 2px;
    border-radius: var(--pos-radius-button);
  }

  @media (max-width: 1025px) {
    .pos-community-header-menutoggle {
      display: block;
    }
  }



/* logo */
/* ================================================================================ */
.pos-community-header-title {
  flex-shrink: 0;
}

.pos-community-header-title svg {
  width: 100%;
  height: auto;
}



/* tools menu */
/* ================================================================================ */
.pos-community-header-signoptions {
  margin-inline-start: auto;
}



/* breadcrumbs */
/* ================================================================================ */
.pos-community-header-breadcrumbs ol {
  display: flex;
  align-items: center;

  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .75rem;
}

.pos-community-header-breadcrumbs li:not(:first-child)::before {
  width: 4px;
  height: 8px;
  margin-inline: .5em;
  display: inline-block;
  position: relative;
  inset-block-start: -1px;

  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: var(--pos-color-content-text-supplementary);

  content: '';
}

.pos-community-header-breadcrumbs a:focus-visible {
  position: relative;
  z-index: 1;
}



/* tools menu */
/* ================================================================================ */
.pos-community-header-tools {
  margin-inline-start: auto;
}

.pos-community-header-tools menu {
  display: flex;
}

.pos-community-header-tools i {
  position: relative;
}

.pos-community-header-indicator {
  width: 12px;
  height: 12px;
  position: absolute;
  inset: 0 -1px auto auto;
  opacity: 0;
  overflow: hidden;

  border-radius: 50%;
  border: 2px solid var(--pos-color-content-background);
  background-color: var(--pos-color-important);

  text-indent: -200%;

  scale: 0;

  transition: opacity .1s linear, scale .1s ease-in-out;
}

  [href="/inbox"] .pos-community-header-indicator {
    background-color: var(--pos-color-confirmation);
  }

  .pos-community-header-indicator.pos-community-header-indicator-active {
    opacity: 1;
    scale: 1;
  }

.pos-community-header-tools button[popovertarget],
.pos-community-header-tools li > a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.pos-community-header-tools .pos-icon {
  width: 24px;
  height: 24px;

  flex-shrink: 0;
}

  .pos-community-header-tools button:not([type="submit"]) .pos-icon,
  .pos-community-header-tools a .pos-icon {
    fill: var(--pos-color-content-icon);
  }

  .pos-community-header-tools button:not([type="submit"]):hover .pos-icon,
  .pos-community-header-tools a:hover .pos-icon {
    fill: var(--pos-color-interactive-hover);
  }


/* popup */
.pos-community-header-popup [popovertarget]:focus-visible {
  outline: 2px solid var(--pos-color-focused);
  outline-offset: 2px;
  border-radius: var(--pos-radius-button)
}

.pos-community-header-popup > [popover] {
  width: 350px;
}


/* search */
.pos-community-header-search-form {
  display: flex;
}

/* search reset button */
.pos-community-header-search-form [type="reset"] {
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: calc(-2.75rem - var(--pos-radius-button));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;

  cursor: pointer;
}

  .pos-community-header-search-form [type="reset"] {
    opacity: 0;
    z-index: -1;

    transition: opacity .1s linear;
    
  }

    .pos-community-header-search-form:focus-within [type="reset"] {
      opacity: 1;
      z-index: 1;

      transition: opacity .2s ease-in-out;
      transition-delay: .2s;
    }

    .pos-community-header-search-form [type="reset"]:focus-visible {
      outline: 2px solid var(--pos-color-focused);
      outline-offset: 2px;
      border-radius: var(--pos-radius-button);
    }

    .pos-community-header-search-form [type="reset"] .pos-icon {
      width: 1rem;
      height: 1rem;
    }

    @media (max-width: 1025px) {
      .pos-community-header-search-form [type="reset"] {
        transition: none !important;
      }
    }

/* input */
.pos-community-header-search-form [type="search"]::-webkit-search-decoration,
.pos-community-header-search-form [type="search"]::-webkit-search-cancel-button,
.pos-community-header-search-form [type="search"]::-webkit-search-results-button,
.pos-community-header-search-form [type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

  .pos-community-header-search-form [type="search"] {
    width: 30px;
    margin-inline-end: calc(-2rem - 4px);
    padding-inline: 0;
    z-index: 1;
    border-start-end-radius: var(--pos-radius-button);
    border-end-end-radius: var(--pos-radius-button);

    opacity: .01;
    cursor: pointer;

    transition: all .2s ease-in-out;
  }

    .pos-community-header-search-form:focus-within [type="search"] {
      width: 250px;
      padding-inline: var(--pos-padding-input) calc(var(--pos-padding-input) + 4rem);
      z-index: 0;

      cursor: text;
      opacity: 1;
    }

    @media (max-width: 1025px) {
      .pos-community-header-search-form [type="search"] {
        transition: none;
      }

      .pos-community-header-search-form:focus-within {
        position: absolute;

        inset-inline-start: calc(var(--pos-padding-page) + 24px + var(--pos-padding-page));
        inset-inline-end: 0;
        z-index: 10;
      }

      .pos-community-header-search-form:focus-within [type="search"] {
        width: calc(100% - var(--pos-padding-page));
      }
    }

/* submit button */
.pos-community-header-search-form [type="submit"] {
  padding-inline: var(--pos-padding-button);
  pointer-events: none;

  cursor: pointer;
  border-radius: var(--pos-radius-button);
}

  .pos-community-header-search-form:focus-within [type="submit"] {
    position: relative;
    z-index: 1;
    pointer-events: all;

    background-color: var(--pos-color-button-primary-background);

    color: var(--pos-color-button-primary-text);
  }

  .pos-community-header-search-form:focus-within [type="submit"]:focus-visible {
    outline: 2px solid var(--pos-color-focused);
    outline-offset: 2px;
  }

  .pos-community-header-search-form [type="submit"] .pos-icon {
    padding-block-start: 1px;
    position: relative;
    inset-block-start: 2px;

    fill: var(--pos-color-content-icon);
  }

  .pos-community-header-search-form:has([type="search"]:hover) .pos-icon {
    fill: var(--pos-color-interactive-hover);
  }

  .pos-community-header-search-form:focus-within [type="submit"] .pos-icon {
    fill: var(--pos-color-button-primary-text);
  }



/* profile menu */
/* ================================================================================ */
.pos-community-header-profile-button {
  padding-inline: var(--pos-padding-button);
  height: var(--pos-height-button);
  display: flex;
  align-items: center;
  gap: .5rem;
  user-select: none;

  cursor: pointer;
  border-radius: var(--pos-radius-button);
  border: 1px solid var(--pos-color-page-background);
  background-color: var(--pos-color-page-background);

  white-space: nowrap;

  transition-property: background-color, color;
  transition-duration: .1s;
  transition-timing-function: linear;
}

  .pos-community-header-profile-button:hover,
  .pos-community-header-profile:has(:popover-open) .pos-community-header-profile-button {
    background-color: var(--pos-color-highlight-background);

    color: var(--pos-color-highlight-text);
  }

  .pos-community-header-profile:has(:popover-open) .pos-community-header-profile-button {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  /* disable default popover arrow */
  .pos-community-header-profile:has(:popover-open) .pos-community-header-profile-button:after {
    display: none;
  }

  .pos-community-header-profile-button:focus-visible {
    outline: 2px solid var(--pos-color-focused);
    outline-offset: 2px;
  }

  .pos-community-header-profile-button .pos-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;

    color: var(--pos-color-interactive);

    transition: rotate .15s ease-in-out;
  }

    .pos-community-header-profile:has(:popover-open) .pos-community-header-profile-button .pos-icon {
      rotate: -180deg;
    }

  @media (max-width: 1025px) {
    .pos-community-header .logo {
      width: 34px;
      height: 34px;
    }

    .pos-community-header .logo-title,
    .pos-community-header .logo-subtitle {
      display: none;
    }

    .pos-community-header-profile-button {
      border: 0;
      background-color: transparent;
    }

    .pos-community-header-profile-button .pos-icon {
      display: none;
    }

    .pos-community-header-profile-button-name {
      display: none;
    }
  }

.pos-community-header-profile-content {
  min-width: calc(anchor-size(width) + var(--pos-radius-panel) * 2);
  margin-block-start: 0;

  border-radius: var(--pos-radius-panel) 0 var(--pos-radius-panel) var(--pos-radius-panel);
  background-color: var(--pos-color-highlight-background);

  color: var(--pos-color-highlight-text);
}

  .pos-community-header-profile-content a,
  .pos-community-header-profile-content button {
    width: 100%;
    padding: 1rem .75rem;
    display: block;

    cursor: pointer;

    color: inherit;

    transition: all .1s linear;
  }

  .pos-community-header-profile-content a:hover,
  .pos-community-header-profile-content button:hover,
  .pos-community-header-profile-content a:focus-visible,
  .pos-community-header-profile-content button:focus-visible {
    border-radius: 0;
    outline: none;
    background-color: var(--pos-color-interactive-hover);

    color: var(--pos-color-content-inverted-text);
  }


/* create menu */
/* ================================================================================ */
.pos-community-header-create {
}

  .pos-community-header-create .pos-button {
    user-select: none;

    border-color: var(--pos-color-button-primary-background);

    transition-property: border-radius, background-color;
    transition-duration: 0s, .1s;
    transition-timing-function: linear;
  }

    .pos-community-header-create .pos-button:hover {
      color: var(--pos-color-button-primary-text);
    }

    .pos-community-header-create .pos-button:active {
      color: var(--pos-color-button-primary-text);
    }

    .pos-community-header-create:has(:popover-open) .pos-button {
      border-end-end-radius: 0;
      border-end-start-radius: 0;
    }

    .pos-community-header-create:has(:popover-open) .pos-button {
      background-color: var(--pos-color-button-primary-hover-background);
    }

    /* disable default popover arrow */
    .pos-community-header-create:has(:popover-open) .pos-button:after {
      display: none;
    }

    .pos-community-header-create .pos-button i {
      height: 100%;
      margin-inline-start: calc(var(--pos-padding-button) * -1);
      padding-inline: var(--pos-padding-button);
      display: flex;
      align-items: center;

      border-radius: 0 var(--pos-radius-button) var(--pos-radius-button) 0;
      background-color: var(--pos-color-button-primary-background);
    }

    @media (max-width: 1025px) {
      .pos-community-header-create .pos-button {
        padding-inline: 0;
      }

      .pos-community-header-create .pos-button i {
        margin-inline: 0;
      }

      .pos-community-header-create .pos-community-label {
        display: none;
      }
    }

.pos-community-header-create-content {
  min-width: 120px;
  margin-block-start: 0;

  border-radius: var(--pos-radius-panel) 0 var(--pos-radius-panel) var(--pos-radius-panel);
  background-color: var(--pos-color-interactive);

  color: var(--pos-color-content-inverted-text);
}

  .pos-community-header-create-content a {
    padding: 1rem .75rem;
    display: block;

    color: inherit;

    transition: background-color .1s linear;
  }

    .pos-community-header-create-content a:hover,
    .pos-community-header-create-content a:focus-visible {
      outline: none;
      background-color: var(--pos-color-button-primary-hover-background);
    }