@use '../abstract' as *;
:root {
  $main-header-height:  pxToRem(64);
  --main-header-height: #{$main-header-height};
}
.main-header {
  --p-main-header-bg-color:     var(--color-neutral-0);
  --p-main-header-border-color: var(--color-border);

  display:flex; align-items:center; gap:pxToRem(24); block-size:var(--main-header-height); padding-inline:pxToRem(24);
  background-color:hsl(var(--p-main-header-bg-color));
  border-block-end:solid pxToRem(1) hsl(var(--p-main-header-border-color));
  -webkit-user-select:none; user-select:none;

  > * { min-inline-size:0; }
  &-end { flex-shrink:0; display:flex; align-items:center; block-size:100%; gap:pxToRem(24); }

  /* override */
  .drop {
    @media #{$break1}, #{$break2} {
      position:fixed; z-index:5; inset-block-start:var(--main-header-height); inset-inline:0;
      inline-size:100%; max-inline-size:none;
    }
  }


  #{$theme-dark} & {
    --p-main-header-bg-color: var(--color-neutral-105);
  }

  @media #{$break1}, #{$break2} {
    gap:pxToRem(8); padding-inline-start:pxToRem(8);
    .logo { margin-inline-end:auto; }
    .user-profile {
      .drop { max-inline-size:initial; }
      .drop-wrapper { position:static; }
    }
    #Support { inset-block-end:0; overflow:auto; border-start-start-radius:0; border-start-end-radius:0; }
  }
  @media #{$break3open} {
    &-end { margin-inline-start:auto; }

    .user-profile-button + .drop {
      border-start-start-radius:0; border-start-end-radius:0;
      inset-inline:pxToRem(-1) 0; inset-block-start:100%;
    }
    #Support {
      margin-block-start:pxToRem(2);
      &.drop {
        &::before, &::after { inset-block-start:pxToRem(-7); }
        &::before           { inline-size:pxToRem(16); }
        &::after            { inline-size:pxToRem(17); }
      }
    }
  }
}