@alarm-notice-prefix: alarm-notice;

.@{alarm-notice-prefix} {
  position  : fixed;
  bottom    : 0;
  right     : 60px;
  width     : 350px;
  transform : translateY(90%);
  transition: all .2s ease-in-out;

  &.visible {
    transform: translateY(0);

    .@{alarm-notice-prefix}__toogle .anticon {
      transform: rotateZ(180deg);
    }
  }

  &,
  &__toogle {
    background-color: #ffffff;
    box-shadow      : 0 0 7px 0 rgba(0, 0, 0, 0.3);
    z-index         : 100;
    border-radius   : 5px 5px 0 0;
  }

  &__toogle {
    text-align : center;
    position   : absolute;
    top        : -18px;
    right      : 20px;
    width      : 48px;
    height     : 18px;
    padding-top: 2px;
    border     : none;
    cursor     : pointer;

    &::before {
      content   : '';
      position  : absolute;
      left      : -4px;
      right     : -4px;
      bottom    : -8px;
      height    : 8px;
      background: inherit;
    }

    &-badge {
      position : absolute;
      top      : -12px;
      right    : 0;
      z-index  : 100;
      transform: translateX(50%);
    }
  }

  &__content {
    position: relative;
    width   : 100%;
    height  : 68px;
    padding : 12px 32px 12px 12px;

    p {
      margin     : 0;
      line-height: 22px;
      font-size  : 14px;
      color      : #f9517d;
      cursor     : pointer;
    }

    span {
      color: #a7a7a7;
    }

    &-next {
      width      : 28px;
      height     : 44px;
      line-height: 44px;
      text-align : center;
      position   : absolute;
      top        : 12px;
      right      : 0;
      border-left: 1px solid #dfdfdf;
      cursor     : pointer;

      &.disabled {
        cursor: not-allowed;
        color : #dfdfdf;
      }
    }
  }
}