@import "./product";
@import "./brand";

/* Double class to override .ads-Label */
.ads-RadioWrap.ads-RadioWrap {
  @apply inline-flex justify-start relative;
}

.ads-RadioWrap--isDisabled {
  @apply cursor-not-allowed;
}

.ads-RadioWrap-control {
  @apply flex
    h-4
    items-stretch
    w-4;

  flex: 0 0 auto;
}

.ads-Radio {
  @apply relative w-full;
}

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

.ads-Radio-backdrop {
  @apply absolute
    border
    border-transparent
    inset-0
    pointer-events-none
    rounded-full;

  transition-duration: 0.2s;
  transition-property: background-color;
  transition-timing-function: ease;
}

.ads-Radio-backdrop:after {
  @apply absolute
    block
    border
    border-transparent
    inset-0
    pointer-events-none
    rounded-full;

  content: "";
}

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

.ads-Radio-input:disabled + .ads-Radio-backdrop {
  @apply shadow-none;
}

.ads-Radio-icon {
  @apply absolute
    pointer-events-none
    rounded-full
    w-2
    h-2;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.1s ease;
}

.ads-Radio-input:checked ~ .ads-Radio-icon {
  @apply bg-brandGreen-400;

  transform: translate(-50%, -50%) scale(1);
}

.ads-RadioWrap-text {
  @apply font-regular
    ml-2
    normal-case
    text-body;

  letter-spacing: normal;
  line-height: 16px;
  -webkit-tap-highlight-color: transparent;
}

.ads-RadioWrap--isLabelHidden > .ads-RadioWrap-text {
  @apply visually-hidden;
}