@use "sass:math";
@use "_variables" as *;
@use "_mixins" as *;
@use "_button-mixins" as *;
@use "_bootstrap-variables" as *;

.mobile-msg {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  height: $header-mobile-msg-height;
  background: pvar(--bg-secondary-400);

  .msg {
    color: pvar(--fg-300);
    font-weight: $font-bold;

    @include font-size(14px);
  }

  button {
    my-global-icon {
      color: pvar(--fg-200);
    }
  }
}

.root {
  --co-logo-size: 34px;
  --co-root-padding: 1.5rem;

  color: pvar(--header-fg-500);
  background-color: pvar(--header-bg-500);

  padding: var(--co-root-padding);
  width: 100%;

  display: flex;
  align-items: center;
}

.peertube-title {
  flex-shrink: 1;
  min-width: var(--co-logo-size);
  flex-grow: 0;
  font-size: 24px;
  font-weight: $font-bold;
  color: inherit !important;
  display: flex;
  align-items: center;
  min-height: 46px; // Prevent layout shifting when waiting for the right part of the header to load

  @include padding-left(18px);
  @include padding-right(0.5rem);
  @include margin-right(auto);
  @include disable-default-a-behaviour;
}

.instance-name {
  @include ellipsis;
  @include margin-left(10px);
}

.logo {
  display: inline-block;
  min-width: var(--co-logo-size);
  height: var(--co-logo-size);
}

my-search-typeahead {
  max-width: 270px;
  width: 100%;

  @media screen and (min-width: #{breakpoint(xl)}) {
    max-width: 310px;
  }

  @media screen and (min-width: #{breakpoint(xxl)}) {
    max-width: 350px;
  }

  @include margin-right(1.5rem);
}

.margin-button {
  @include margin-right(0.75rem);
}

.menu-button {
  display: none;
  justify-self: end;
}

.dropdown {
  z-index: #{z("header") + 1} !important;
}

.dropdown-item {
  cursor: pointer;
  display: flex;
  align-items: center;

  @include dropdown-with-icon-item;

  &:hover {
    .hover-display-toggle {
      display: none;
    }

    .hover-display-toggle[hidden] {
      display: inherit !important;
    }
  }
}

.logged-in-container {
  border-radius: 25px;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  max-width: 250px;
  height: 100%;

  .display-name {
    font-weight: $font-bold;
    color: pvar(--header-fg-500);
    line-height: 1;
    padding-top: 3px;
  }

  .username {
    color: pvar(--header-fg-300);
  }

  > .dropdown-toggle {
    display: flex;
    align-items: center;
    border-radius: 6px;

    &::after {
      // Disable bootstrap toggle
      border: 0;
    }
  }
}

my-actor-avatar {
  width: 34px;
  height: 34px;
}

.login-icon {
  display: none;
}

.tertiary-button,
button {
  color: pvar(--header-fg-200);
}

@media screen and (max-width: $menu-overlay-view) {
  .peertube-title {
    @include padding-left(0);
  }

  .icon-logo {
    @include margin-left(0);
  }
}

@media screen and (max-width: $small-view) {
  .root {
    --co-root-padding: 1rem;
  }

  my-search-typeahead {
    @include margin-right(0.5rem);
  }

  .margin-button[theme="tertiary"] {
    @include margin-right(5px);
  }

  my-actor-avatar {
    width: 24px;
    height: 24px;
  }

  .dropdown-toggle {
    @include peertube-button;
    @include rounded-icon-button;

    &::after {
      display: none;
    }
  }

  .logged-in-info {
    display: none;
  }

  .login-icon {
    display: inline-block;
  }

  .login-label {
    display: none;
  }
}

@media screen and (max-width: $mobile-view) {
  .root {
    --co-logo-size: 48px;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.5rem;
    justify-content: space-between;

    > * {
      grid-row: 1;
    }
  }

  .buttons-container {
    margin: 0 auto;
    max-width: 100%;
  }

  .menu-button {
    display: block;
    position: relative;
    right: -10px;
  }

  my-search-typeahead {
    grid-row: 2 !important;
    grid-column: 1 / 4;
    max-width: 100%;

    @include margin-right(0);
  }

  .peertube-title {
    @include margin-right(5px);
  }

  .instance-name {
    display: none;
  }
}
