@use "variables";

/*
** Basic navbar menu
*/
.fwe-navbar-menu {
  position: relative;
}

.fwe-navbar-menu-button {
  padding: 0;
  border: none;
  background: none;

  span {
    margin-left: 4px; // separate icon from label
  }

  position: relative;
  cursor: pointer;
  color: variables.$text;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    content: "";
    position: absolute;
    height: 0px;
    right: 0px;
    left: 0px;
    bottom: -13px;
    background: variables.$caerul;
    transition: height 0.2s;
  }

  &.fwe-selected {
    color: variables.$hero;

    &::before {
      height: 4px;
    }
  }

  &:hover {
    color: variables.$hero;
  }
}

.fwe-navbar-menu-container {
  position: absolute;
  display: flex;
  top: 45px;
  right: 0px;
  width: 300px;
  background-color: variables.$white;
  flex-direction: column;
  box-shadow: 0px 1px 4px #00000029;
  max-height: calc(100vh - #{variables.$navbar-height});
  overflow: visible;
  @media (min-width: (variables.$grid-breakpoint-sm - 1)) {
    &.fwe-hidden {
      display: none;
    }
  }

  @media (max-width: (variables.$grid-breakpoint-sm - 2)) {
    display: flex;
    transition: transform 0.3s ease;
    transform: translateX(0%);
    width: 100% !important;
    position: fixed;
    top: variables.$navbar-height;
    left: 0;
    height: calc(100vh - #{variables.$navbar-height});
    &.fwe-hidden {
      transform: translateX(-105%);
    }
  }
}

/**
 * Profile menu
 */
.fwe-profile-menu {
  .fwe-profile-menu-header {
    margin-bottom: variables.$spacer-s;
    display: flex;
    flex-direction: row;
    padding: variables.$spacer-l variables.$spacer-m variables.$spacer-m variables.$spacer-m;

    .fwe-profile-image-container {
      width: variables.$spacer-xl;
      height: variables.$spacer-xl;
      flex-shrink: 0;
      border-radius: 50%;
      overflow: hidden;
      background-color: variables.$gray-400;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: variables.$spacer-s;

      .fwe-profile-image {
        width: 100%;
      }

      .fwe-placeholder-letter {
        width: variables.$spacer-l;
        height: variables.$spacer-l;
        background-color: variables.$gray-100;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: solid 6px variables.$white;
        box-sizing: content-box;
        font-size: variables.$font-size-base;
        line-height: 28px;
      }
    }

    .fwe-profile-data-container {
      display: flex;
      flex-direction: column;

      .fwe-username {
        overflow-wrap: anywhere;
        font-weight: variables.$font-weight-bold;
      }

      .fwe-email {
        overflow-wrap: anywhere;
        font-size: variables.$font-size-small;
        margin-top: variables.$spacer-xxxs;
      }
    }
  }

  .fwe-profile-menu-item {
    padding: variables.$spacer-xs variables.$spacer-m !important;
    min-height: auto;
    text-align: left;
    justify-content: unset;

    .fwe-icon,
    .fwe-svg-icon {
      margin-right: 12px !important;
    }
  }

  .fwe-btn-logout {
    border-radius: 0;
    justify-content: center;
    margin-top: variables.$spacer-xxl - variables.$spacer-m;
  }

  @media (max-width: variables.$grid-breakpoint-sm - 2) {
    .fwe-profile-menu-header {
      margin-bottom: variables.$spacer-s;
      background-color: variables.$background;
      border-bottom: solid 1px variables.$gray-200;
      padding: variables.$spacer-m variables.$spacer-s variables.$spacer-m variables.$spacer-s;

      .fwe-profile-image-container {
        width: variables.$spacer-xxl;
        height: variables.$spacer-xxl;
        margin-right: variables.$spacer-l;

        .fwe-placeholder-letter {
          width: 42px;
          height: 42px;
          border: solid 9px variables.$white;
          font-size: variables.$font-size-xl;
          line-height: 40px;
        }
      }
    }

    .fwe-profile-data-container .fwe-email {
      font-size: variables.$font-size-base !important;
    }

    .fwe-profile-menu-item {
      padding: 20px variables.$spacer-s !important;

      i {
        padding-right: variables.$spacer-m !important;
      }
    }

    .fwe-btn-logout {
      margin: auto variables.$spacer-s variables.$spacer-l variables.$spacer-s !important;
      border-radius: variables.$control-border-radius;
    }
  }
}

/**
 * Notification menu
 */
.fwe-notification-button {
  @extend .fwe-navbar-menu-button;

  width: 32px;

  &.fwe-info {
    color: variables.$hero;
    background: variables.$white;

    &:has(.fwe-notification-batch) {
      color: variables.$text;
    }

    &::before {
      background: variables.$white;
    }

    .fwe-notification-batch {
      background: variables.$hero;
    }

    &.fwe-selected {
      color: variables.$hero;
      &::before {
        background: variables.$hero;
      }
    }
  }

  &.fwe-warning {
    color: variables.$orange;
    background: variables.$white;

    &:has(.fwe-notification-batch) {
      color: variables.$text;
    }

    &::before {
      background: variables.$white;
    }

    .fwe-notification-batch {
      background: variables.$orange;
    }

    &.fwe-selected {
      color: variables.$orange;
      &::before {
        background: variables.$orange;
      }
    }
  }

  &.fwe-error {
    color: variables.$red;
    background: variables.$white;

    &:has(.fwe-notification-batch) {
      color: variables.$text;
    }

    &::before {
      background: variables.$white;
    }

    .fwe-notification-batch {
      background: variables.$red;
    }

    &.fwe-selected {
      color: variables.$red;
      &::before {
        background: variables.$red;
      }
    }
  }

  &:hover {
    &.fwe-info {
      color: variables.$hero-hover;
      background: variables.$white;

      .fwe-notification-batch {
        background: variables.$hero-hover;
      }
    }

    &.fwe-warning {
      color: variables.$orange-hover;
      background: variables.$white;

      .fwe-notification-batch {
        background: variables.$orange-hover;
      }
    }

    &.fwe-error {
      color: variables.$red-hover;
      background: variables.$white;

      .fwe-notification-batch {
        background: variables.$red-hover;
      }
    }
  }

  &.fwe-notification-button--strong {
    &.fwe-info {
      color: variables.$white;
      background: variables.$hero;

      &::before {
        background: variables.$hero;
      }

      .fwe-notification-batch {
        background: variables.$text;
      }
    }

    &.fwe-warning {
      color: variables.$white;
      background: variables.$orange;

      &::before {
        background: variables.$orange;
      }

      .fwe-notification-batch {
        background: variables.$text;
      }
    }

    &.fwe-error {
      color: variables.$white;
      background: variables.$red;

      &::before {
        background: variables.$red;
      }

      .fwe-notification-batch {
        background: variables.$text;
      }
    }

    &:hover {
      &.fwe-info {
        color: variables.$white;
        background: variables.$hero-hover;

        &::before {
          background: variables.$hero-hover;
        }
      }

      &.fwe-warning {
        color: variables.$white;
        background: variables.$orange-hover;

        &::before {
          background: variables.$orange-hover;
        }
      }

      &.fwe-error {
        color: variables.$white;
        background: variables.$red-hover;

        &::before {
          background: variables.$red-hover;
        }
      }
    }
  }

  .fwe-notification-batch {
    position: absolute;
    border-radius: 50%;
    height: 22px;
    line-height: calc(#{variables.$font-size-small} + 4px);
    width: 22px;
    font-size: variables.$font-size-small;
    color: variables.$white !important;
    background: variables.$caerul;
    border: 2px solid variables.$white;
    top: -10px;
    right: -10px;
  }
}

.fwe-notification-menu {
  width: 400px;

  .fwe-notification-title {
    display: flex;
    align-items: center;
    font-weight: variables.$font-weight-bold;
    height: 48px;
    padding-left: variables.$spacer-m;
    padding-right: variables.$spacer-xxs;
    border-bottom: 1px solid variables.$border;
  }

  .fwe-notification-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-left: variables.$spacer-m;
    margin-right: variables.$spacer-m;
    border-top: 1px solid variables.$border;
  }

  .fwe-notification-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .fwe-notification-item {
      padding: unset;
      text-align: left;
      background: unset;
      border: unset;
      outline: none;
      align-items: stretch;
      flex-direction: column;
      display: flex;
      cursor: pointer;

      &:hover {
        background: variables.$background;
      }

      &.fwe-disabled {
        color: variables.$text-disabled;

        .fwe-notification-item-content {
          &::before {
            color: variables.$text-disabled;
          }
        }
      }

      .fwe-notification-item-content {
        border-top: 1px solid variables.$border;
      }

      &:first-child {
        .fwe-notification-item-content {
          border-top: none;
        }
      }
    }

    .fwe-notification-item-content {
      position: relative;
      margin-left: variables.$spacer-l + variables.$spacer-m;
      margin-right: variables.$spacer-m;
      padding-top: variables.$spacer-s;
      padding-bottom: variables.$spacer-s;

      .fwe-item-header {
        font-weight: variables.$font-weight-bold;
        margin-bottom: 4px;
      }

      .fwe-item-footer {
        font-size: variables.$font-size-small;
        color: variables.$text-disabled;
        margin-top: 11px;
      }

      font-family: variables.$font-family-base;

      &::before {
        content: "";
        position: absolute;
        height: 16px;
        width: 16px;
        left: -32px;
        top: 21px;
      }
    }

    .fwe-notification-info {
      @extend .fwe-notification-item-content;

      &::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTgsLjk5OTg4YTcuMDAwMDYsNy4wMDAwNiwwLDEsMCw3LjAwMDA2LDcuMDAwMDZBNy4wMDAwNyw3LjAwMDA3LDAsMCwwLDgsLjk5OTg4Wk05LDEyLjk5OTk0SDd2LTZIOVptMC04SDd2LTJIOVoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PC9zdmc+");
      }
    }

    .fwe-notification-warning {
      @extend .fwe-notification-item-content;

      &::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2ZmOTYwMCIvPjwvZz48L3N2Zz4=");
      }
    }

    .fwe-notification-error {
      @extend .fwe-notification-item-content;

      &::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2Q1MDAwMCIvPjwvZz48L3N2Zz4=");
        color: variables.$red;
      }
    }
  }
}