dify-web/app/components/database/settings/index-method-radio/index.module.css

.icon {
  margin-right: 12px;
  width: 24px;
  height: 24px;
  background:  center center no-repeat;
  background-size: contain;
}

.high-quality-icon {
  background-image: url(./assets/high-quality.svg);
}
.economy-icon {
  background-image: url(./assets/economy.svg);
}

.wrapper .item:hover {
  background-color: #ffffff;
  border-color: #B2CCFF;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}

.wrapper .item-active {
  background-color: #ffffff;
  border-width: 1.5px;
  border-color: #528BFF;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}

.wrapper .item-active .radio {
  border-width: 5px;
  border-color: #155EEF;
}

.wrapper .item-active:hover {
  border-width: 1.5px;
  border-color: #528BFF;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}

.wrapper .item.disable {
  @apply opacity-60;
}
.wrapper .item-active.disable {
  @apply opacity-60;
}
.wrapper .item.disable:hover {
  @apply bg-gray-25 border border-gray-100 shadow-none cursor-default opacity-60;
}
.wrapper .item-active.disable:hover {
  @apply cursor-default opacity-60;
  border-width: 1.5px;
  border-color: #528BFF;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}