@import 'shared/colors';

ion-radio-group {
  .item-interactive-disabled.sc-ion-label-ios-h:not(.item-multiple-inputs),
  .item-interactive-disabled:not(.item-multiple-inputs) .sc-ion-label-ios-h {
    opacity: 1;
  }

  .item-label:last-of-type {
    --inner-border-width: 0px;
  }

  ion-radio {
    --border-width: 1px;

    &.radio-disabled {
      &.radio-checked {
        opacity: 0.7;
      }

      &:not(.radio-checked) {
        opacity: 1;

        &::part(container) {
          background-color: get-color(gr-200);
          --color: #{get-color(gr-700)};
        }
      }
    }
  }

  // 有輸入框的radio item
  .radio-input-item {
    display: flex;
    align-items: center;

    /* 
      input 顯示時:
      1. 把 ion-item 改成靠上對齊
      2. 因為 inner-item 本身會有 padding-top，為了對齊，要給 radio 也加上
    */
    &.input-showing {
      align-items: flex-start;
      ion-radio {
        padding-top: 12px;
      }
    }

    .input-invalid {
      border: 1px solid get-color(red-700);
    }

    .sc-ion-label-ios-h {
      align-self: center;
      word-break: break-all;
      white-space: pre-wrap;
    }
  }
}