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

@card-content-padding-top: 30px;

.alarm-log-context {
  display: flex;
  align-items: center;
  width: 100%;

  .context-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(40% - 40px);
    margin-right: 10%;

    .context-img {
      margin-right: 20px;
    }

    .left-item {
      width: calc(100% - 90px);

      .left-item-title {
        font-size: 18px;
      }

      .left-item-value {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .context-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    margin-right: 10px;
    padding-left: 10%;
    border-left: 1px solid rgba(0, 0, 0, 0.09);

    .right-item {
      .right-item-title {
        color: #666;
        font-size: 12px;
      }

      .right-item-value {
        color: #000;
        font-size: 14px;
      }
    }
  }
}

.alarm-log-state {
  position: absolute;
  top: @card-content-padding-top;
  right: -12px;
  display: flex;
  justify-content: center;
  width: 100px;
  padding: 2px 0;
  color: #fff;
  background-color: rgba(#5995f5, 0.15);
  transform: skewX(45deg);

  .card-state-content {
    transform: skewX(-45deg);

    .stateText {
      width: 70px;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      text-overflow: ellipsis;
    }
  }
}
