portainer/app/react/components/BoxSelector/BoxOption.module.css

.root input {
  display: none;
}

.root label {
  @apply border border-solid;
  @apply bg-gray-2 border-gray-5 text-black;
  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
  @apply th-highcontrast:text-white;

  font-weight: normal;
  font-size: 12px;
  display: block;
  border-radius: 8px;
  padding: 15px;
  text-align: left;
  box-shadow: var(--shadow-boxselector-color);
  position: relative;

  text-align: left;
  height: 100%;
}

/* not disabled */
.root input:not(:disabled) ~ label {
  @apply bg-gray-2;
  @apply th-dark:bg-gray-iron-10;
  @apply th-highcontrast:bg-black;

  box-shadow: none;
  cursor: pointer;
}

/* disabled */
.root input:disabled + label {
  @apply bg-white;
  @apply th-dark:bg-gray-7;
  @apply th-highcontrast:bg-black;
  filter: opacity(0.3) grayscale(1);

  cursor: not-allowed;
}

.root input:checked + label {
  @apply bg-blue-2 border-blue-6;
  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
  @apply th-highcontrast:bg-blue-10 th-highcontrast:border-blue-7;

  border-radius: 8px;
  padding: 15px;
  box-shadow: none;
}