Selection: Responsive Extra Text

.c-selection {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);
  border-radius: remify(12px);
  padding: remify(16px);
  gap: remify(8px);

  & * {
    position: relative;
    z-index: 1;
  }

  @include min-screen(bp(tablet)) {
    flex-direction: column;
    justify-content: flex-start;
    padding: remify(24px);
  }

}

.c-selection__img-block {
  margin-left: auto;
  flex: 0 0 remify(45px);

  @include min-screen(bp(phablet)) {
    margin-left: initial;
    text-align: center;
    margin-bottom: remify(24px);
  }
}

.c-selection__img {
  width: remify(80px);

  @include min-screen(bp(phablet)) {
    width: auto;
    height: remify(45px);
  }
}

.c-selection__text,
.c-selection__extra-text {
 @include font-scale(level-2);
 text-align: left;
 color: secondary(text, 100);

 @include min-screen(bp(tablet)) {
  text-align: center;
 }
}

.c-selection__input {
  flex: 0 0 remify(24px);
  display: block;
  border: remify(1px) solid primary(night, 40);
  border-radius: 100%;
  height: remify(24px);
  width: remify(24px);
  position: relative;

  &:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: remify(12px);
    width: remify(12px);
    top: remify(5px);
    left: remify(5px);
    margin: auto;
  }

}

.c-selection__input--checkbox {
  border-radius: remify(4px);
}

.c-selection__label {
  position: absolute !important;  // overrides default radio
  width: 100%;
  height: 100% !important;  // overrides default radio
  top: 0;
  left: 0;
  z-index: 9;
  cursor: pointer;
  background-image: none !important; // overrides default radio
}

.c-selection__radio:checked ~ .c-selection__input,
.c-selection__radio:checked ~ .text-container .c-selection__input,
.c-selection__checkbox:checked ~ .c-selection__input,
.c-selection__checkbox:checked ~ .text-container .c-selection__input {
  background-color: status(positive);
}

.c-selection__radio:checked ~ .c-selection__label,
.c-selection__checkbox:checked ~ .c-selection__label {
  border: remify(1px) solid primary(sky, 100);
  border-radius: remify(12px);
}

.c-selection__radio:checked ~ .c-selection__input:before,
.c-selection__radio:checked ~ .text-container .c-selection__input:before,
.c-selection__checkbox:checked ~ .c-selection__input:before,
.c-selection__checkbox:checked ~ .text-container .c-selection__input:before {
  background-color: #FFFFFF;
}

.c-selection__checkbox:checked ~ .c-selection__input:before,
.c-selection__checkbox:checked ~ .text-container .c-selection__input:before {
  content: "";
  width: remify(16px);
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACFSURBVHgBlZABDYAwDAQXFCBhEiYBCTgACXPAJOAACeBoOEBCaUMTmi7Luk+aNe1ftp9zHQKAEWvuYQjyWBk+pcEIjXhcWJ5Ht4Uj8IBfyQptAtr1cqUMDejUy8SLLGHsFwFlzlncJg30e0HPajmSMmbunyok4AilgrNIPTu6HnG+qeV7AQuZ3Dvt6WYdAAAAAElFTkSuQmCC');
}

.c-selection:has(.c-selection__extra-text) {
  .c-selection__img-block {
    @include max-screen(bp(tablet)) {
      display: none;
    }
  }
}

/*------------------------------------*
  Compact modifier
*------------------------------------*/
.c-selection--compact {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding: remify(16px);

  .c-selection__text {
    text-align: left;
  }

  .c-selection__img-block {
    margin-bottom: 0;
    margin-left: auto;
  }

  .c-selection__img {
    aspect-ratio: 1 / 1;
  }

}

/*------------------------------------*
  Responsive modifier
*------------------------------------*/
.c-selection--responsive {
  @include max-screen(bp(tablet)) {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: remify(16px);

    .c-selection__text {
      text-align: left;
    }

    .c-selection__img-block {
      margin-left: auto;
      margin-bottom: 0;
    }

    .c-selection__img {
      aspect-ratio: 1 / 1;
    }

  }

}

/*------------------------------------*\
  Expandable modifier
\*------------------------------------*/
.c-selection--expandable {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: remify(16px);

  .text-container {
    display: flex;
    align-items: center;
    gap: remify(8px);
  }

  .c-selection__input {
    margin-left: initial;
  }

  .c-selection__fold {
    display: none;
    flex: 1 0 100%;
    margin-top: remify(16px);
    position: relative;
    z-index: 100;
  }

  .c-selection__radio:checked ~ .c-selection__fold {
    display: block;
  }

}