@use 'src/app/styles/variables' as *;

.notification-button {
  margin-left: 16px;

  &__icon {
    color: $white-35;

    & .mat-badge-content {
      width: 16px;
      min-width: 16px;
      height: 16px;
      min-height: 16px;
      line-height: 16px;
      font-size: 10px;
      padding: 0;
    }
  }

  @media (max-width: $small) {
    margin-top: 0;
  }
}

.notification-menu {
  &__button {
    &:hover {
      background-color: $blue-white;
    }
  }

  &__icon {
    &_yellow {
      color: $yellow;
    }

    &_green {
      color: $green;
    }

    &_pink {
      color: $pink;
    }

    &_blue {
      color: $blue;
    }
  }
}
