@import '../../styles/variables';

.NotificationsBell {
  position: relative;

  &--open {
    .NotificationsBell__button {
      background-color: $gray95;
      box-shadow: inset 0 2px 0 0 $brand-color;
    }
  }

  &__sticker {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    min-width: $item * 2;
    height: auto;
    padding: 3px $item / 2 $item / 4;
    line-height: 1;
    font-family: "Roboto", sans-serif;
    font-size: 10px;
    text-align: center;
    color: $white;
    border-radius: 3px;
    background-color: $error-color;
  }

  &__button {
    background: none;
    border: none;
    padding: 3px 0 0 0; // Optical compensation
    margin: 0;
    height: $layout-header-height;
    width: $layout-header-height;
    cursor: pointer;

    &:hover {
      background: $gray95;
    }

    &:focus {
      outline: 0;
    }
  }

  &__dropdown {
    position: absolute;
    top: $layout-header-height;
    right: -8px;
    width: 480px;
    max-height: 50vh;
    background: $white;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;

    &::after {
      position: absolute;
      top: 0;
      right: 23px;
      display: block;
      width: 0;
      height: 0;
      content: '';
      border: 10px solid ;
      border-color: $white $white transparent transparent;
      box-shadow: 2px -2px 4px 0 rgba(0, 0, 0, 0.11);
      transform-origin: 0 50%;
      transform: rotate(-45deg);
    }

    &__panel {
      padding: 15px;
      box-shadow: inset 0 -1px 0 0 rgba(204, 204, 204, .5);

      &:last-child {
        border-bottom: none;
      }

      &--messages {
        padding: 0;
        flex: 1 1 100%;
        overflow-y: auto;
      }

    }

    @media screen and (max-width: $layout-desktop) {

      width: 100vw;
      height: calc(100vh - 5px - #{$layout-header-height});
      max-height: none;
      left: 0;
      right: 0;
      top: initial;
      bottom: 0;
      position: fixed;
      box-shadow: none;

      &::after {
        display: none;
      }
    }
  }

  &__message {
    padding: 10px 15px;
    box-shadow: inset 0 -1px 0 0 $gray95;
    font-size: $font-normal;
    line-height: $font-bigger;
    transition: background-color 0.25s linear;

    &:last-child {
      border-bottom: none;
    }

    &--unread {
      background: $badge-main-color;
    }

    &__body {
      color: $black;
    }
    &__title {
      color: $black;
      font-weight: bold;
    }

    &__date {
      color: $gray50;
      font-size: $font-small;
      line-height: $font-small;
      margin-top: 5px;
    }
  }
}