.ads-OptionButton {
  @apply block
    relative
    px-6
    pt-5
    pb-20
    w-full
    cursor-pointer
    self-stretch;

  flex: 1 1 0;
}

.ads-OptionButton-content {
  @apply relative
    z-default;
}

.ads-OptionButton-heading {
  @apply font-medium
    text-h3
    text-gray-800
    text-center
    w-full;
}

.ads-OptionButton-description {
  @apply font-regular
    mt-3
    text-body
    text-gray-700
    leading-normal;
}

.ads-OptionButton-input {
  @apply visually-hidden;
}

.ads-OptionButton-backdrop {
  @apply absolute
    bg-gray-100
    border
    border-transparent
    inset-0
    pointer-events-none
    rounded
    w-full
    h-full
    duration-200
    transition-colors
    ease-in;
}

.ads-OptionButton-input:checked + .ads-OptionButton-backdrop {
  @apply bg-gray-200
    border-gray-500;
}

.ads-OptionButton-input:active + .ads-OptionButton-backdrop,
.ads-OptionButton-input:focus + .ads-OptionButton-backdrop {
  @apply shadow-focus;
}

.ads-OptionButton-selected {
  @apply items-center
    justify-center
    text-bodySm
    text-gray-700
    hidden
    absolute
    left-0
    right-0;

  bottom: theme("padding.8");
}

.ads-OptionButton-input:checked ~ .ads-OptionButton-selected {
  @apply flex;
}

.ads-OptionButton-icon {
  @apply mr-1;
}