/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

.root {

}

.container {

}
.userIcon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPGRlZnM+DQogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjwvcmVjdD4NCiAgICA8L2RlZnM+DQogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iSWNvbi1Ob3RpZmljYXRpb24iPg0KICAgICAgICAgICAgPHBhdGggZD0iTTE2LDUgTDE2LDUgTDE2LDUgQzIwLjQxODI3OCw1IDI0LDguNTgxNzIyIDI0LDEzIEwyNCwyMyBMOCwyMyBMOCwxMyBMOCwxMyBDOCw4LjU4MTcyMiAxMS41ODE3MjIsNSAxNiw1IFoiIGlkPSJSZWN0YW5nbGUtOSIgZmlsbD0iI0M4Q0NENyI+PC9wYXRoPg0KICAgICAgICAgICAgPGcgaWQ9Ik92YWwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjAwMDAwMCwgMjQuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPg0KICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPg0KICAgICAgICAgICAgICAgIDwvbWFzaz4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iTWFzayI+PC9nPg0KICAgICAgICAgICAgICAgIDxjaXJjbGUgZmlsbD0iI0M4Q0NENyIgbWFzaz0idXJsKCNtYXNrLTIpIiBjeD0iNCIgY3k9IjEiIHI9IjMiPjwvY2lyY2xlPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all $animation-swift-out;
  position: relative;
  &:hover {
    opacity: 0.8;
  }
  &:active {
    transform: scale(0.95);
  }
  &:global(.dark) {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0NC4xICg0MTQ1NSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPHRpdGxlPkljb24tTm90aWZpY2F0aW9uLVdoaXRlPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz4NCiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iNCI+PC9yZWN0Pg0KICAgIDwvZGVmcz4NCiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJJY29uLU5vdGlmaWNhdGlvbi1XaGl0ZSI+DQogICAgICAgICAgICA8cGF0aCBkPSJNMTYsNSBMMTYsNSBMMTYsNSBDMjAuNDE4Mjc4LDUgMjQsOC41ODE3MjIgMjQsMTMgTDI0LDIzIEw4LDIzIEw4LDEzIEw4LDEzIEM4LDguNTgxNzIyIDExLjU4MTcyMiw1IDE2LDUgWiIgaWQ9IlJlY3RhbmdsZS05IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+DQogICAgICAgICAgICA8ZyBpZD0iT3ZhbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMDAwMDAwLCAyNC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+DQogICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+DQogICAgICAgICAgICAgICAgPC9tYXNrPg0KICAgICAgICAgICAgICAgIDxnIGlkPSJNYXNrIj48L2c+DQogICAgICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBtYXNrPSJ1cmwoI21hc2stMikiIGN4PSI0IiBjeT0iMSIgcj0iMyI+PC9jaXJjbGU+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=');
  }
}
:global(.NotificationDropdown-root) {
  position: relative;
  display: inline-block;
  :global(.NotificationDropdown-menu) {
    /* Combined Shape: */
    box-shadow: 2px 2px 4px 0 #D9DCE3;
    position: absolute;
    z-index: 9999;
    right: 0;
    background-color: $gray-light;
    border-radius: 4px;
    margin-top: 12px;
    width: 224px;
    &:after {
      content: " ";
      display: block;
      position: absolute;
      width: 10px;
      height: 10px;
      right: 11px;
      top: -5px;
      transform: rotate(135deg);
      border-color: transparent transparent $gray $gray;
      background-color: $gray-light;
      z-index: 1001;
    }
  }
  :global(.NotificationDropdown-option) {
    cursor: pointer;
    line-height: 29px;
    &:hover {
      color: $blue;
    }
  }
  .userData {
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid $gray;
    .userName {
      font-size: 16px;
      letter-spacing: -0.41px;
    }
    .userEmail {
      font-size: 10px;
      line-height: 16px;
      letter-spacing: -0.41px;
      color: $gray-dark;
    }
  }
}
.notificationList {
  :global(.notifications-wrapper) {
    border-bottom: 1px solid #C8CCD7 !important;
    padding: 8px !important;
    &:last-child {
      border-bottom: none !important;
    }
    &:hover {
      background: #C8CCD7;
      :global(.notification) {
        background: #C8CCD7 !important;
      }
    }
  }
}
.notificationCount {
  background-color: $blue;
  border-radius: 50%;
  padding: 2px 5px;
  position: absolute;
  right: -2px;
  top: -1px;
  color: #FFF;
  font-size: 9px;
  &:global(.count-0) {
    visibility: hidden;
  }
}
.noNotifications {
  text-align: center;
}
