@import 'shared/colors';

* {
  // 全站文字可以長按選取
  user-select: text;
  -webkit-user-select: text;
  // 全站自動斷字（需搭配 html[lang] 屬性，已由 startup service 設定）
  hyphens: auto;
  word-break: break-word;
}

html {
  // Prevent iPhone orientation change portrait to landspace blows up font-size.
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--uofx-font-size);

  &.hidden-footer {
    // #40522 IOS 26，第一次進到頁面 ion-footer 會消失這裡先移除，再看原議題怎麼改
    // ion-footer {
    //  display: none;
    // }
  }
}

ion-header {
  box-shadow: var(--uofx-box-shadow-down);

  &.uofx-no-shadow {
    box-shadow: none;
  }

  &.header-md::after {
    height: 0;
  }

  &.header-ios {
    ion-toolbar {
      // --padding-start: 20px;
      // --padding-end: 0;
      --padding-top: 0;
      --padding-bottom: 0;

      &:last-of-type {
        --border-width: 0;
      }
    }
  }

  ion-back-button {
    margin-left: 16px;
  }
}

ion-item {
  ion-label {
    // 讓整個列表項目可點擊
    // 點擊 label 文字區域時，事件會穿透到 ion-item
    pointer-events: none;
  }
}

ion-content {
  &.card-container {
    --background: var(--ion-card-container-background);
  }

  // 捲軸樣式
  &::part(scroll) {
    scrollbar-color: #{get-color(bk-400)} #{get-color(gr-300)};
  }
}

ion-footer {
  background-color: get-color(w-50);
  padding: 0.375rem 0.75rem 1rem;

  ion-toolbar {
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;
  }

  ion-button {
    margin-right: 8px;
    &:last-child {
      margin-right: 0;
    }
  }

  ion-grid {
    padding: 0;
    padding-bottom: var(--ion-safe-area-bottom);
    ion-col,
    ion-button {
      padding: 0px;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

// 設定 backdrop 全域的透明度
ion-backdrop {
  --backdrop-opacity: var(--ion-backdrop-opacity);
  opacity: var(--ion-backdrop-opacity);
}

// 開起來有背景的 modal
ion-modal.modal-card {
  --backdrop-opacity: 0.7;
}

ion-skeleton-text {
  min-height: 1.6rem;
  line-height: 1.6rem;
  --border-radius: 2px;
}

.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 91px);

  ion-spinner {
    --color: #{get-color(or-550)};

    &.index-spinner {
      width: 50px;
      height: 50px;
    }
  }
}

// 送出時的 loading spinner size
.send-spinner {
  width: 14px;
  height: 14px;
}

.index-loading {
  height: 100%;
}