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

.main {
  position: relative;
  width: 100%;
  height: 100%;
}

.main.simple {
  .selectDeviceBtn {
    top: 8px;
    right: 8px;
  }

  .card {
    top: 8px;
    left: 8px;
  }

  .controls {
    right: 8px;
    bottom: 0;
  }
}

.twoToneBtn {
  color: fade(#000000, 85%);

  :global {
    .anticon + span {
      margin-left: 4px;
    }
  }

  // :global {
  //   .anticon {
  //     color: @primary-color;
  //   }
  // }
}

.selectDeviceBtn {
  position: absolute;
  top: 8px;
  right: 8px;
}

.card {
  top: 8px;
  left: 8px;
  height: calc(100% - 16px);
}

.operationCommon {
  position: absolute;
  top: 8px;
  border-radius: 2px;
  padding: 0;
  background-color: #fff;
  box-shadow: @cluster-box-shadow;
  line-height: 24px;
  font-size: 12px;

  > span {
    cursor: pointer;
    display: inline-block;
    padding: 0 16px;
    &:hover {
      background-color: #f5f5f5;
    }
  }
}

.operationLeft {
  .operationCommon();
  font-size: 14px;
  line-height: 32px;
  right: 264px;

  > span {
    padding: 0 16px;
  }

  :global {
    .anticon {
      margin-right: 4px;
    }
  }
}

.operation {
  .operationCommon();
  font-size: 14px;
  line-height: 32px;
  right: 8px;

  .active {
    color: @primary-color;
  }

  :global {
    .anticon {
      margin-right: 4px;
    }

    .ant-radio-group {
      margin-left: 8px;
    }

    .ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
      border-right-color: #d9d9d9;
    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child,
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
      border-color: #d9d9d9;
    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
      display: none;
    }
  }
}

.operationMin {
  font-size: 12px;
  line-height: 24px;

  > span {
    padding: 0 8px;
  }
}

:global {
  .map-select-device-markers {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #217ad9;
    color: @white;
    border: solid 4px #fff;
    /* box-shadow: 0 2px 4px fade(#000, 15%);*/

    .ant-badge {
      position: absolute;
      top: -10px;
      right: -10px;
    }

    .ant-badge-count {
      background: #fff;
      color: rgba(43, 109, 229, 1);
      border: 1px solid rgba(43, 109, 229, 1);
      box-shadow: none;
    }
  }
}