// @idea to import in project's global.scss; example:
// @use '../node_modules/@idea-ionic/common/css/global.scss';

.selectable {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.selectableAll {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  -ms-user-select: all !important;
  user-select: all !important;
}
.tappable {
  cursor: pointer;
}

.flexBox {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.normalCase {
  text-transform: none;
}

.alert-wrapper {
  --max-width: 300px;
  --width: 300px;
  .alert-button-role-cancel {
    color: var(--ion-color-medium-shade) !important;
  }
  .alert-button-role-destructive {
    color: var(--ion-color-danger) !important;
  }
}

.alertLongOptions {
  .alert-wrapper {
    --max-width: 400px;
    --width: 400px;
  }
  .alert-checkbox-button,
  .alert-radio-button {
    height: auto !important;
    // necessary for Chrome to display the buttons:
    min-height: 50px;
  }
  .alert-checkbox-label,
  .alert-radio-label {
    white-space: pre-line !important;
  }
}

ion-popover.popoverLarge::part(content) {
  width: 500px;
  max-height: 600px;
  @media only screen and (max-width: 767px) {
    width: 350px;
  }
}

ion-modal.modalFullScreen {
  --height: 100%;
  --width: 100%;
}
// to use to force the backdrop on modal over full screen modals (.modalFullScreen)
ion-modal.forceBackdrop {
  backdrop-filter: brightness(50%);
}

.plt-ios .action-sheet-wrapper .action-sheet-group:last-of-type {
  padding-bottom: 30px;
}

ion-popover.actionSheetPopover {
  --width: 400px;
  ion-content {
    --background: var(--ion-color-white);
  }
}

ion-toast.toastWithServerMessage::part(message) {
  font-size: 0.85em;
  font-style: italic;
}

ion-text.obligatoryDot::after {
  content: '*';
  font-size: 1.1em;
  color: var(--ion-color-danger);
  -webkit-text-fill-color: var(--ion-color-danger); // needed for viewMode
  vertical-align: text-top;
}

/* Better readability in view-mode */
.viewMode {
  .native-input[disabled],
  ion-select.select-disabled,
  .item-disabled,
  ion-textarea,
  .native-textarea[disabled],
  ion-item ion-label[position='stacked'],
  ion-item ion-label[position='fixed'],
  ion-input,
  ion-checkbox[slot] + ion-label,
  ion-radio[slot] + ion-label,
  ion-checkbox::part(label) {
    opacity: 1 !important;
    -webkit-text-fill-color: var(--ion-text-color);
    --placeholder-opacity: 0 !important;
  }
  ion-select.select-disabled::part(icon),
  ion-text.obligatoryDot {
    display: none !important;
    opacity: 0 !important;
  }
}

.fieldHasError,
.fieldHasError ion-item {
  // note: all this css is needed to obtain the result in every platform
  --border-color: var(--ion-color-danger) !important;
  --inner-border-width: 0 !important;
  border-bottom: 4px solid var(--ion-color-danger) !important;
  border-bottom-color: var(--ion-color-danger) !important;
}

idea-label,
idea-labeler,
idea-email-data,
idea-email-data-configuration,
.hasHTMLContent {
  .innerContent {
    margin: 10px 0;
    min-height: 20px;
    height: auto;
    line-height: 20px;
    width: 100%;
  }
  .innerContent.md > p:first-child {
    margin: 0;
  }
  small {
    display: inline-block;
    background: var(--ion-color-medium-shade);
    color: white;
    border: 1px solid var(--ion-color-medium);
    border-radius: 3px;
    font-size: 0.7em;
    padding: 0 2px;
    font-weight: 500;
  }
}

ion-label {
  width: fit-content;
}

ion-popover.chipCheckerPopover::part(content) {
  --width: 600px;
  background-color: var(--ion-color-white);
  @media only screen and (max-width: 767px) {
    --width: 400px;
  }
}

:root {
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  --ion-color-white: white;
  --ion-color-white-rgb: 255, 255, 255;
  --ion-color-white-contrast: #40474c;
  --ion-color-white-contrast-rgb: 64, 71, 76;
  --ion-color-white-shade: #eee;
  --ion-color-white-tint: #f3f6f9;

  --ion-color-ideaToolbar: #222428;
  --ion-color-ideaToolbar-rgb: 34, 36, 40;
  --ion-color-ideaToolbar-contrast: #ffffff;
  --ion-color-ideaToolbar-contrast-rgb: 255, 255, 255;
  --ion-color-ideaToolbar-shade: #202226;
  --ion-color-ideaToolbar-tint: #2d2f33;

  --ion-color-transparent: transparent;
  --ion-color-transparent-rgb: 255, 255, 255;
  --ion-color-transparent-contrast: black;
  --ion-color-transparent-contrast-rgb: 0, 0, 0;
  --ion-color-transparent-shade: transparent;
  --ion-color-transparent-tint: transparent;

  --ion-text-color-step-50: #0d0d0d;
  --ion-text-color-step-100: #1a1a1a;
  --ion-text-color-step-150: #262626;
  --ion-text-color-step-200: #333333;
  --ion-text-color-step-250: #404040;
  --ion-text-color-step-300: #4d4d4d;
  --ion-text-color-step-350: #595959;
  --ion-text-color-step-400: #666666;
  --ion-text-color-step-450: #737373;
  --ion-text-color-step-500: #808080;
  --ion-text-color-step-550: #8c8c8c;
  --ion-text-color-step-600: #999999;
  --ion-text-color-step-650: #a6a6a6;
  --ion-text-color-step-700: #b3b3b3;
  --ion-text-color-step-750: #bfbfbf;
  --ion-text-color-step-800: #cccccc;
  --ion-text-color-step-850: #d9d9d9;
  --ion-text-color-step-900: #e6e6e6;
  --ion-text-color-step-950: #f2f2f2;

  --ion-background-color-step-50: #f2f2f2;
  --ion-background-color-step-100: #e6e6e6;
  --ion-background-color-step-150: #d9d9d9;
  --ion-background-color-step-200: #cccccc;
  --ion-background-color-step-250: #bfbfbf;
  --ion-background-color-step-300: #b3b3b3;
  --ion-background-color-step-350: #a6a6a6;
  --ion-background-color-step-400: #999999;
  --ion-background-color-step-450: #8c8c8c;
  --ion-background-color-step-500: #808080;
  --ion-background-color-step-550: #737373;
  --ion-background-color-step-600: #666666;
  --ion-background-color-step-650: #595959;
  --ion-background-color-step-700: #4d4d4d;
  --ion-background-color-step-750: #404040;
  --ion-background-color-step-800: #333333;
  --ion-background-color-step-850: #262626;
  --ion-background-color-step-900: #191919;
  --ion-background-color-step-950: #0d0d0d;

  @media (prefers-color-scheme: dark) {
    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-white: #1e1e1e;
    --ion-color-white-rgb: 30, 30, 30;
    --ion-color-white-contrast: #ccc;
    --ion-color-white-contrast-rgb: 204, 204, 204;
    --ion-color-white-shade: #121212;
    --ion-color-white-tint: #202020;

    --ion-color-ideaToolbar: #121212;
    --ion-color-ideaToolbar-rgb: 18, 18, 18;
    --ion-color-ideaToolbar-contrast: #ffffff;
    --ion-color-ideaToolbar-contrast-rgb: 255, 255, 255;
    --ion-color-ideaToolbar-shade: #080808;
    --ion-color-ideaToolbar-tint: #222;

    --ion-color-transparent: transparent;
    --ion-color-transparent-rgb: 0, 0, 0;
    --ion-color-transparent-contrast: #fff;
    --ion-color-transparent-contrast-rgb: 255, 255, 255;
    --ion-color-transparent-shade: transparent;
    --ion-color-transparent-tint: transparent;

    --ion-text-color-step-50: #f2f2f2;
    --ion-text-color-step-100: #e6e6e6;
    --ion-text-color-step-150: #d9d9d9;
    --ion-text-color-step-200: #cccccc;
    --ion-text-color-step-250: #bfbfbf;
    --ion-text-color-step-300: #b3b3b3;
    --ion-text-color-step-350: #a6a6a6;
    --ion-text-color-step-400: #999999;
    --ion-text-color-step-450: #8c8c8c;
    --ion-text-color-step-500: #808080;
    --ion-text-color-step-550: #737373;
    --ion-text-color-step-600: #666666;
    --ion-text-color-step-650: #595959;
    --ion-text-color-step-700: #4d4d4d;
    --ion-text-color-step-750: #404040;
    --ion-text-color-step-800: #333333;
    --ion-text-color-step-850: #262626;
    --ion-text-color-step-900: #191919;
    --ion-text-color-step-950: #0d0d0d;

    --ion-background-color-step-50: #0d0d0d;
    --ion-background-color-step-100: #1a1a1a;
    --ion-background-color-step-150: #262626;
    --ion-background-color-step-200: #333333;
    --ion-background-color-step-250: #404040;
    --ion-background-color-step-300: #4d4d4d;
    --ion-background-color-step-350: #595959;
    --ion-background-color-step-400: #666666;
    --ion-background-color-step-450: #737373;
    --ion-background-color-step-500: #808080;
    --ion-background-color-step-550: #8c8c8c;
    --ion-background-color-step-600: #999999;
    --ion-background-color-step-650: #a6a6a6;
    --ion-background-color-step-700: #b3b3b3;
    --ion-background-color-step-750: #bfbfbf;
    --ion-background-color-step-800: #cccccc;
    --ion-background-color-step-850: #d9d9d9;
    --ion-background-color-step-900: #e6e6e6;
    --ion-background-color-step-950: #f2f2f2;
  }
}

.ion-color-dark {
  --ion-color-base: var(--ion-color-dark) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-dark-shade) !important;
  --ion-color-tint: var(--ion-color-dark-tint) !important;
}

.ion-color-white {
  --ion-color-base: var(--ion-color-white) !important;
  --ion-color-base-rgb: var(--ion-color-white-rgb) !important;
  --ion-color-contrast: var(--ion-color-white-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-white-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-white-shade) !important;
  --ion-color-tint: var(--ion-color-white-tint) !important;
}

.ion-color-ideaToolbar {
  --ion-color-base: var(--ion-color-ideaToolbar) !important;
  --ion-color-base-rgb: var(--ion-color-ideaToolbar-rgb) !important;
  --ion-color-contrast: var(--ion-color-ideaToolbar-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-ideaToolbar-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-ideaToolbar-shade) !important;
  --ion-color-tint: var(--ion-color-ideaToolbar-tint) !important;
}

.ion-color-transparent {
  --ion-color-base: var(--ion-color-transparent) !important;
  --ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
  --ion-color-contrast: var(--ion-color-transparent-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-transparent-shade) !important;
  --ion-color-tint: var(--ion-color-transparent-tint) !important;
}