@import '~antd/es/style/themes/default.less';

.popover {
  position: absolute;
  width: 336px;
  z-index: 1100;
}

.noticeButton {
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
}
.icon {
  padding: 4px;
  vertical-align: middle;
}

.badge {
  font-size: 16px;
  :global {
    .@{ant-prefix}-badge-multiple-words {
      padding: 0 4px;
    }
  }
  &.fountMessage {
    .icon {
      animation: bellshake 2s ease-out infinite;
    }
  }
}

.tabs {
  :global {
    .@{ant-prefix}-tabs-nav-list {
      margin: auto;
    }

    .@{ant-prefix}-tabs-nav-scroll {
      text-align: center;
    }
    .@{ant-prefix}-tabs-bar {
      margin-bottom: 0;
    }
  }
}

.header {
  border-radius: 0 !important;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    color: rgb(102, 102, 102);
  }
  span {
    &:last-child {
      cursor: pointer;
      color: @primary-color;
      font-size: 12px;
    }
  }
}

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