.horn {
  position: fixed;
  right: 30px;
  bottom: 10px;
  z-index: 19;
  // width: 112px;
  // height: 50px;
  color: #fff;
  background: #2d8cf0;
  transform: translate(0, 0);
  cursor: pointer;
  opacity: 1;
  transition: 0.2s ease-in;
  &.hide {
    transform: translateY(100%) scale(0.3);
    opacity: 0;
    transition: 0.2s ease-out;
  }
  &.stow {
    transform: translateX(142px);
    transition: 0.2s ease-out;
  }
  &--btn {
    display: inline-block;
    width: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: top;
    background: #006ad9;
    border-right: 1px solid #2479d3;
    &:hover {
      background: #2479d3;
      transition: 0.2s ease-out;
    }
  }
  &--num {
    width: 112px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    &::before {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      vertical-align: -3px;
      background: url('https://img.lkbang.net/notice.94d42513.png') no-repeat;
      background-size: 100% 100%;
      content: '';
    }
  }
}

.message-reminder {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 19;
  display: flex;
  flex-direction: column;
  width: 404px;
  height: 412px;
  background: #fff;
  transform: translate(50%, 110%) scale(0.5);
  transition: 0.2s ease-in;
  &.hide {
    transform: translate(50%, 110%) scale(0.5);
    opacity: 0;
    transition: 0.2s ease-out;
  }
  &.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: 0.2s ease-in;
  }
  &__header {
    &--title {
      position: relative;
      padding-left: 35px;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
      line-height: 50px;
      background: #1890ff url('https://img.lkbang.net/notice.94d42513.png') no-repeat 10px center;
      background-size: 20px 20px;
      .close {
        position: absolute;
        right: 20px;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }
  &__body {
    flex: 1;
    padding: 15px;
    overflow: auto;
    background: #f8f8f9;
    &--list {
      & .item:first-child {
        margin-top: 0;
      }
      .item {
        margin-top: 15px;
        padding: 15px 0;
        background: #fff;
        border: 1px solid #efefef;
        &:hover {
          // border-color: #ccc;
          // transition: 0.2s linear;
        }
      }

      .info {
        display: flex;
        padding: 0 15px;
        .order-number {
          flex: 1;
          padding-left: 20px;
          background: url('https://img.lkbang.net/order_no.f4e0a8b3.png') no-repeat scroll 0 center;
        }
        .mark-read {
          color: #178fff;
          cursor: pointer;
        }
      }

      .time {
        display: flex;
        margin-top: 12px;
        padding: 0 15px;
        span {
          flex: 1;
          padding-left: 20px;
          background: url('https://img.lkbang.net/datetime.1b5f9199.png') no-repeat scroll 0 center;
        }
      }

      .notice {
        margin-top: 12px;
        padding: 10px 15px 0;
        border-top: 1px solid #efefef;
        a {
          position: relative;
          display: block;
          color: #ff1515;
          &::before {
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-top: 8px;
            margin-right: 6px;
            vertical-align: top;
            background: #ff1515;
            border-radius: 50%;
            content: '';
          }
          &::after {
            position: absolute;
            top: 50%;
            right: 0;
            display: block;
            width: 0;
            height: 0;
            margin-top: -3px;
            border: 6px solid transparent;
            border-left: 8px solid #999;
            content: '';
          }
        }
      }
    }
  }
  &__footer {
    background-color: #fff;
    border: 1px solid #efefef;
    &--actions {
      display: flex;
      & div:first-child {
        border: none;
      }
      > div {
        flex: 1;
        color: #2d8cf0;
        line-height: 40px;
        text-align: center;
        border-left: 1px solid #efefef;
        cursor: pointer;
        // &:hover {
        //   background: #f9f9f9;
        //   cursor: pointer;
        // }
      }
    }
  }
}
