@import 'shared/colors';

.uofx-checkbox-item {
  ion-checkbox {
    --border-width: 1px;
    &.checkbox-checked::part(container) {
      background-color: #ff7840;
    }

    &:not(.checkbox-checked) {
      --border-color: #{get-color(gr-700)};
    }

    &.checkbox-disabled {
      opacity: 1;
      &:not(.checkbox-checked)::part(container) {
        background-color: get-color(gr-200);
      }
      &.checkbox-checked {
        opacity: 0.7;
      }
    }
  }

  // 項目 disable狀態
  .item-interactive-disabled {
    .sc-ion-label-ios-h {
      opacity: 1;
    }
  }

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

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

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

// 單複選 選取框樣式
.check-item {
  margin-bottom: 12px;

  ion-item::part(native) {
    border: 1px solid get-color(gr-500);
    border-radius: 10px;
  }

  ion-item.item-inner {
    flex-basis: 98px;
    flex-shrink: 0;
  }

  ion-input {
    background: white;
  }

  // 選項選中時 調整(框線,背景)設為橘色
  &.selected {
    ion-item::part(native) {
      border: 1px solid get-color(or-600);
      background: get-color(or-50);
    }
  }

  // 選項disabled時 調整ion-input背景為灰色
  &.disabled {
    ion-input {
      background-color: get-color(gr-100);
    }
  }
}