@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/index.less';
@panda-notifier-prefix-cls: ~'@{ant-prefix}-head-notifier';
@notifier-button: ~'@{panda-notifier-prefix-cls}-button';
@notifier-popover: ~'@{panda-notifier-prefix-cls}-popover';
:global {

.@{notifier-button} {
  display: inline-block;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  &:hover {
    .@{notifier-button}-fountMessage {
      svg {
        path {
          fill: #fff;
        }
      }
    }
  }
  &-title {
    color: hsla(221, 100%, 95%, 0.7);
  }
  &-icon {
    padding: 4px;
    vertical-align: middle;
  }
  &-badge {
    font-size: 16px;
    :global {
      .@{ant-prefix}-badge-multiple-words {
        padding: 0 4px;
      }
    }
    &.@{notifier-button}-fountMessage {
      .@{notifier-button}-icon {
        animation: bellshake 2s ease-out infinite;
      }
    }
  }
}
.@{notifier-popover} {
  position: absolute;
  z-index: 1100;
  width: 360px;
  padding: 0 10px !important;
  box-shadow: 0 0 10px 2px rgba(0,0,0,0.1),0 0 10px 2px rgba(0,0,0,0.1);
  border-radius: 4px;
  * {
    box-shadow: none;
  }
  &-title {
    color: hsla(221, 100%, 95%, 0.7);
  }
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-radius: 0 !important;
    border-bottom: 1px solid #E4E6EA;

    .@{notifier-popover}-title {
      margin-left: 5px;
      color: rgb(102, 102, 102);
      font-weight: bold;
      font-size: 16px;
    }
  }
  
}

@keyframes bellshake {
  0% {
    transform: rotate(0deg);
  }
  3.75% {
    transform: rotate(25deg);
  }
  15% {
    transform: rotate(-25deg);
  }
  22.5% {
    transform: rotate(15deg);
  }
  29% {
    transform: rotate(-10deg);
  }
  35% {
    transform: rotate(5deg);
  }
  43% {
    transform: rotate(-2deg);
  }
  50%,
  to {
    transform: rotate(0deg);
  }
}

  
}