/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import "../../utils/styles/Theme.scss";

.navbar {
  width: 100%;
  height: 80px;

  padding: 0px $padding-20;

  .navbar__container {
    width: 100%;
    height: 100%;

    @include flexbox;

    margin: 0px auto;

    position: relative;

    // Menu
    .navbar__menu {
      display: none;
    }

    // Logo & Page Details
    .navbar__logo__pageDetails {
      width: 300px;
      height: 100%;

      @include flexbox;
      justify-content: flex-start;

      img {
        @include flexbox;
        left: 0px;
        max-height: 50px;
        max-width: 200px;
        object-fit: contain;
      }

      .navbar__logo__pageDetails__icon {
        width: 28px;
        height: 100%;

        @include flexbox;
        justify-content: flex-start;

        :only-child {
          font-size: $icon-large;
        }
      }
      .navbar__logo__pageDetails__title {
        width: calc(100% - 28px);
        height: 100%;

        @include flexbox;
        justify-content: flex-start;

        p {
          text-transform: uppercase;
          font-weight: $font-weight-bold;

          padding-left: $padding-08;
        }
      }
    }

    // Username
    .navbar__username {
      width: calc(100% - 340px);
      height: 100%;

      @include flexbox;
      justify-content: flex-end;
      padding-right: $padding-08;

      p {
        font-size: $font-regular;
      }
    }

    // Userimage
    .navbar__userimage {
      width: 40px;
      height: 100%;

      @include flexbox;
      justify-content: flex-end;

      img {
        width: 40px;
        height: 40px;

        border: 2px solid transparent;
        border-radius: 50%;

        cursor: pointer;
      }
    }

    // User Menu
    .navbar__usermenu {
      width: 200px;

      position: absolute;
      top: 80px;
      right: 0px;

      z-index: 4;

      .navbar__usermenu__item {
        width: 100%;
        height: 40px;

        @include flexbox;

        cursor: pointer;

        padding: 0px $padding-08;
      }
    }
  }
}

.navbar__mobile__menu {
  width: 100%;
  height: calc(100svh - 80px);

  z-index: 10;
  position: fixed;
  top: 80px;

  overflow-y: auto;
  padding: 0px $padding-20;
}

.navbar__QR__popup {
  .navbar__QR__popup__image {
    @include flexbox;
    img {
      width: 300px;
      height: 300px;
      object-fit: contain;
    }
  }

  .navbar__QR__popup__message {
    height: 40px;

    @include flexbox;
  }
}

// Media Queries
@media (width<=1000px) {
  .navbar {
    .navbar__container {
      .navbar__menu {
        width: 40px;
        height: 100%;
        @include flexbox;

        :only-child {
          left: -12px !important;
        }
      }

      .navbar__logo__pageDetails {
        width: calc(100% - 40px);
      }

      .navbar__username {
        display: none;
      }
    }
  }
}
