@import '../../style/variables.less';

@import '../component/ProTools/style/index.less';

.pro-theme-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #d8e6ff;
  border-radius: var(--zaui-border-radius, 8px);
  cursor: pointer;

  .setting-icon {
    margin-top: -1px;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.pro-theme-tools-follow {
    background: var(--ant-primary-1, #e6f7ff);
    svg {
      color: var(--zaui-brand, #006aff);
    }
  }

  .anticon {
    color: var(--zaui-text, #343434);

    svg {
      font-size: 20px;
    }
  }
}

.pro-theme-tools-drawer {
  .@{ant-prefix}-drawer-body {
    padding: 32px;
  }

  .@{ant-prefix}-space-vertical {
    gap: var(--zaui-space-size-sm, 8px) !important;
  }

  .anticon-question-circle {
    color: var(--zaui-brand, #006aff);
  }

  .copy-btn {
    position: absolute;
    bottom: 20px;
    left: 32px;
    z-index: 10;
    width: calc(100% - 64px);
  }

  .pro-theme-tools-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .pro-theme-tools-space {
    margin-bottom: var(--zaui-space-size-md, 16px);
  }

  .@{ant-prefix}-radio-button-wrapper {
    padding: 0 12px;
  }
}