// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@use "../_globals" as *;

#header {
  background-color: var(--color-header-background);
  border-bottom: $header-border-size solid var(--color-header-border);
  height: $header-height;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 6px 0 var(--color-header-shadow);

  @include backdrop-filter(blur(4px) saturate(160%) contrast(45%) brightness(140%));

  .wrapper {
    &,
    .left,
    .right {
      height: 100%;
      display: flex;
      flex-direction: row;
    }

    .left,
    .right {
      align-items: center;
    }

    .left {
      flex: 1;
    }

    .right {
      flex: 0 0 auto;
      padding-left: 12px;
    }
  }

  .logo {
    color: var(--color-black);
    margin-right: 60px;

    .logo-image {
      height: 24px;

      @include background-image-fill;

      &.logo-image--full {
        display: block;
      }

      &.logo-image--short {
        display: none;
      }
    }
  }

  .menu,
  .extras {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .menu .menu-item,
  .extras .extras-item {
    user-select: none;
    height: 100%;
    padding: 0 2px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;

    &::after {
      content: "";
      background-color: var(--color-grey);
      height: 0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      transition: none;
    }
  }

  .menu .menu-item .menu-link,
  .extras .extras-item .extras-link {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .menu .menu-item:hover,
  .menu .menu-item.menu-item--active,
  .extras .extras-item.extras-item--active {
    &::after {
      height: 3px;
      transition: height linear 100ms;
    }
  }

  .menu .menu-item.menu-item--active,
  .extras .extras-item.extras-item--active {
    &::after {
      background-color: var(--color-accent-base);
    }
  }

  .dropdown {
    $dropdown-padding-edges: 8px;
    $dropdown-link-padding-sides: 8px;

    background-color: var(--color-white);
    border: 1px solid var(--color-header-dropdown-border);
    padding: ($header-height - 15px) $dropdown-padding-edges $dropdown-padding-edges;
    display: none;
    position: absolute;
    z-index: 1;
    top: 7px;
    left: (-1 * ($dropdown-padding-edges + $dropdown-link-padding-sides));
    box-shadow: 0 3px 5px 0 var(--color-header-dropdown-shadow);
    border-radius: 3px;

    .dropdown-link {
      color: var(--color-black);
      line-height: 28px;
      letter-spacing: -.1px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-bottom: 2px;
      padding: 0 32px 0 ($dropdown-link-padding-sides + 1px);
      display: block;
      border-radius: 3px;

      @include font-size(13.5px);

      &:hover,
      &:active {
        color: var(--color-white);
      }

      &:hover {
        background-color: var(--color-header-dropdown-link-background-hover);

        &:active {
          transition: background-color linear 100ms;
        }
      }

      &:active {
        background-color: var(--color-header-dropdown-link-background-active);
      }

      &:last-of-type {
        margin-bottom: 0;
      }

      &.dropdown-link--multiple {
        line-height: 18px;
        padding-top: 6px;
        padding-bottom: 6px;

        .dropdown-link-label {
          margin-top: 1px;
        }
      }

      &.dropdown-link--external {
        padding-right: 42px;
        position: relative;

        &::after {
          $icon-size: 12px;

          content: "";
          background-color: var(--color-black);
          width: $icon-size;
          height: $icon-size;
          margin-top: (-1 * ($icon-size * 0.5));
          opacity: .3;
          position: absolute;
          right: ($dropdown-link-padding-sides + 1px);
          top: 50%;

          @include mask-image-internal-fill("common/header/actions-dropdown-external.svg");
        }

        &:hover,
        &:active {
          &::after {
            background-color: var(--color-white);
            opacity: 1;
          }
        }
      }

      .dropdown-link-title,
      .dropdown-link-label {
        display: block;
      }

      .dropdown-link-label {
        opacity: .8;

        @include font-size(13px);
      }
    }
  }

  .menu {
    .menu-item {
      margin-right: 28px;
      position: relative;

      &:hover {
        .dropdown {
          display: block;
        }
      }

      &:last-of-type {
        margin-right: 0;
      }

      .menu-link {
        color: var(--color-black);

        @include font-size(14px);

        &.menu-link--dropdown {
          position: relative;
          z-index: 2;

          &::after {
            content: "";
            background-color: var(--color-black);
            width: 8px;
            height: 5px;
            margin-top: 1px;
            margin-left: 5px;
            opacity: .35;

            @include mask-image-internal-fill("common/header/menu-arrow.svg");
          }
        }
      }
    }
  }

  .extras {
    .extras-item {
      .extras-link {
        color: var(--color-accent-base);
        letter-spacing: -.09px;

        @include font-size(13px);
      }
    }
  }

  .search {
    background: var(--color-header-search-background-default);
    border: 1px solid var(--color-header-search-border-default);
    height: 32px;
    margin-left: 18px;
    padding: 0 10px 0 12px;
    display: flex;
    align-items: center;
    user-select: none;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 var(--color-header-search-shadow);
    transition: border-color linear 100ms;

    &:hover {
      border-color: var(--color-header-search-border-hover);
      cursor: pointer;
    }

    &:active {
      border-color: var(--color-header-search-border-active);
    }

    .search-placeholder {
      color: var(--color-header-search-placeholder-text);
      letter-spacing: -.1px;

      @include font-size(13px);

      &::before {
        content: "";
        background-color: var(--color-blue-grey-dark);
        width: 14px;
        height: 14px;
        margin-top: -2px;
        margin-right: 10px;
        vertical-align: middle;

        @include mask-image-internal-fill("common/header/search-icon.svg");
      }
    }

    .search-shortcut {
      background: var(--color-white);
      border: 1px solid var(--color-header-search-shortcut-border);
      color: var(--color-header-search-shortcut-text);
      letter-spacing: -.2px;
      text-align: center;
      height: 20px;
      line-height: 21px;
      margin-left: 20px;
      padding: 0 5px;
      box-shadow: 0 1px 0 0 var(--color-header-search-shortcut-shadow);
      border-radius: 3px;

      @include font-size(12px);
    }
  }

  .coloring {
    $coloring-height: 16px;
    $coloring-width: 32px;
    $coloring-toggle-size: 24px;

    background-color: var(--color-header-coloring-background-default);
    width: $coloring-width;
    height: $coloring-height;
    margin: 0 32px;
    cursor: pointer;
    position: relative;
    border-radius: ($coloring-height * 0.5);

    &:hover {
      .toggle {
        border-color: var(--color-header-coloring-toggle-border-hover);
        box-shadow: 0 1px 4px 0 var(--color-header-coloring-toggle-shadow-hover);
      }
    }

    &:active {
      .toggle {
        border-color: var(--color-header-coloring-toggle-border-active);
        box-shadow: 0 1px 1px 0 var(--color-header-coloring-toggle-shadow-active);
      }
    }

    &[data-mode="light"] {
      .toggle {
        margin-left: (-1 * ($coloring-toggle-size * 0.25));

        &::before {
          background-color: var(--color-header-coloring-toggle-icon-light-background);
          width: 14px;
          height: 14px;

          @include mask-image-internal("common/header/coloring-mode-light-icon.svg");
        }
      }
    }

    &[data-mode="dark"] {
      .toggle {
        margin-left: ($coloring-width - (($coloring-toggle-size + 2px) - ($coloring-toggle-size * 0.25)));

        &::before {
          background-color: var(--color-header-coloring-toggle-icon-dark-background);
          width: 12px;
          height: 12px;

          @include mask-image-internal("common/header/coloring-mode-dark-icon.svg");
        }
      }
    }

    .toggle {
      background-color: var(--color-white);
      border: 1px solid var(--color-header-coloring-toggle-border-default);
      height: $coloring-toggle-size;
      width: $coloring-toggle-size;
      margin-top: (-1 * (($coloring-toggle-size * 0.5) - ($coloring-height * 0.5) + 1px));
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      border-radius: 100%;
      box-shadow: 0 1px 3px 0 var(--color-header-coloring-toggle-shadow-default);
      transition: all linear 100ms;
      transition-property: border-color, margin-left, box-shadow;

      &::before {
        content: "";

        @include mask-image-fill;
      }
    }
  }

  .actions {
    .action {
      position: relative;

      &:hover {
        .dropdown {
          display: block;
        }

        .action-button {
          &.button {
            background-color: transparent !important;
            color: var(--color-black) !important;
            box-shadow: none !important;
            transition: none !important;
          }

          &::after {
            background-color: var(--color-black);
          }
        }
      }

      .dropdown {
        left: auto;
        right: -5px;
        top: -5px;
      }

      .action-button {
        position: relative;
        z-index: 2;

        &:active {
          transform: none;
        }

        &::after {
          content: "";
          background-color: var(--color-white);
          width: 8px;
          height: 5px;
          margin-left: 7px;
          margin-right: -3px;
          vertical-align: middle;
          opacity: .55;
          transition: opacity linear 100ms;

          @include mask-image-internal-fill("common/header/actions-arrow.svg");
        }
      }
    }
  }
}

// - Media Queries

// For screens below defined widths

@media screen and (max-width: $screen-medium-width-breakpoint) {
  #header {
    .logo {
      margin-right: 42px;
    }

    .coloring {
      margin: 0 20px;
    }
  }
}

@media screen and (max-width: $screen-small-width-breakpoint) {
  #header {
    .logo {
      margin-right: 32px;
    }

    .menu {
      .menu-item {
        margin-right: 20px;

        &:last-of-type {
          margin-right: 0;
        }
      }
    }

    .search {
      margin-left: 12px;
      padding: 0 11px;

      .search-placeholder-text,
      .search-shortcut {
        display: none;
      }

      .search-placeholder {
        &::before {
          margin-right: 0;
        }
      }
    }

    .coloring {
      display: none;
    }

    .actions {
      margin-left: 10px;
    }
  }
}

@media screen and (max-width: $screen-tiny-width-breakpoint) {
  #header {
    .logo {
      margin-top: 1px;
      margin-right: 28px;

      .logo-image {
        &.logo-image--full {
          display: none;
        }

        &.logo-image--short {
          display: block;
        }
      }
    }

    .search {
      margin-left: 0;
    }

    .extras,
    .actions {
      display: none;
    }
  }
}