@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.headerbar {
  // prettier-ignore
  background-image:
        linear-gradient(
            mvar("headerbar.bg.overlay"),
            mvar("headerbar.bg.overlay")
        ),
        linear-gradient(
            mvar("headerbar.bg.main"),
            mvar("headerbar.bg.main")
        );

  @include flex(row, space-between, center);
  padding: 0 mvar("headerbar.ph");
  position: relative;

  min-height: mvar("headerbar.size");
  height: mvar("headerbar.size");
  width: 100%;

  &.transparent {
    --mie-headerbar-bg-main: transparent !important;
  }

  &.bordered {
    border-bottom: 0.1rem solid mvar("headerbar.border");
  }

  > .left {
    @include flex(row, flex-start, center);
    -webkit-app-region: no-drag;
    z-index: 20;
  }

  > .right {
    @include flex(row, flex-end, center);
    -webkit-app-region: no-drag;
    z-index: 20;

    > .content {
      flex: 1;
    }
  }

  > .center {
    @include flex(row, center, center);
    -webkit-app-region: no-drag;
    position: absolute;
    height: 100%;
    left: 50%;
    top: 0;

    transform: translateX(-50%);
    z-index: 20;

    > .mie.header {
      user-select: none;

      .title {
        margin-bottom: 0.2rem;
      }
    }
  }
}
