.radio-item {
  background: var(--ag-ant-color-bg-base);
  border-radius: 6px;
  padding: 12px 16px;
  border: 1px solid var(--ag-ant-color-border-secondary);
  cursor: pointer;
  transition: 0.4s ease;

  .title {
    flex: 1;
    font-weight: 600;
    line-height: 24px;
  }

  .check-icon {
    border: 4px solid var(--ag-ant-color-primary);
    width: 16px;
    height: 16px;
    background: var(--ag-ant-color-bg-base);
    border-radius: 50%;
  }

  .logo-wrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--ag-ant-color-bg-base);
  }

  &.disabled {
    cursor: not-allowed;
    background: var(--ag-ant-color-fill-quaternary);

    .title {
      color: var(--ag-ant-color-text-tertiary);
    }

    .logo-wrap {
      opacity: 0.5;
    }
  }

  &.active {
    box-shadow: 0px 4px 6px 0px var(--ag-ant-color-5);
    border: 1px solid var(--ag-ant-color-primary);
  }

  &:hover:not(&.disabled) {
    box-shadow: 0px 4px 6px 0px var(--ag-ant-color-5);
  }

  .desc {
    color: var(--ag-ant-color-text-tertiary);
    font-size: 12px;
    line-height: 18px;
    margin-top: 4px;
  }

  .top {
    width: 100%;
  }
}
