@use 'sass:meta';

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

///* Core CSS required for Ionic components to work properly */
//@import '@ionic/angular/css/core.css';
//
///* Basic CSS for apps built with Ionic */
//@import '@ionic/angular/css/normalize.css';
//@import '@ionic/angular/css/structure.css';
//@import '@ionic/angular/css/typography.css';
//@import '@ionic/angular/css/display.css';
//
///* Optional CSS utils that can be commented out */
//@import '@ionic/angular/css/padding.css';
//@import '@ionic/angular/css/float-elements.css';
//@import '@ionic/angular/css/text-alignment.css';
//@import '@ionic/angular/css/text-transformation.css';
//@import '@ionic/angular/css/flex-utils.css';

@include meta.load-css('sneat-grid-layout');
@include meta.load-css('theme/variables.scss');

//noinspection CssUnknownTarget
@include meta.load-css('lib/virtual-slider/virtual-slider.scss');

// https://ionicframework.com/docs/theming/colors
:root {
  // Semantic surface tokens. An app can override these at :root or on a
  // narrower host to brand an individual card/menu without replacing shared
  // component markup.
  --sneat-card-header-background: #f0f7ff;
  --sneat-card-header-background-rgb: 240, 247, 255;
  --sneat-card-header-color: #000000;
  --sneat-card-header-color-rgb: 0, 0, 0;
  --sneat-card-header-background-shade: #d3d9e0;
  --sneat-card-header-background-tint: #f2f8ff;

  --sneat-pane-header-background: var(--ion-color-light);
  --sneat-pane-header-color: var(--ion-color-light-contrast);

  // Ionic color alias for headers such as <ion-item-divider color="header">.
  --ion-color-header: var(--sneat-card-header-background);
  --ion-color-header-rgb: var(--sneat-card-header-background-rgb);
  --ion-color-header-contrast: var(--sneat-card-header-color);
  --ion-color-header-contrast-rgb: var(--sneat-card-header-color-rgb);
  --ion-color-header-shade: var(--sneat-card-header-background-shade);
  --ion-color-header-tint: var(--sneat-card-header-background-tint);
}

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

.sneat-card-header {
  --background: var(--sneat-card-header-background);
  --color: var(--sneat-card-header-color);
  background: var(--sneat-card-header-background);
  color: var(--sneat-card-header-color);
}

.sneat-pane-header {
  --background: var(--sneat-pane-header-background);
  --color: var(--sneat-pane-header-color);
  background: var(--sneat-pane-header-background);
  color: var(--sneat-pane-header-color);
}
.cardy {
  //--ion-background-color: #fcfcfc;
}

.cardy ion-card {
  --ion-background-color: #ffffff;
  background-color: #ffffff;
}

.sneat-tiny-start-padding {
  --padding-start: 0.25em;
}

.sneat-small-start-padding {
  --padding-start: 0.5em;
}

.sneat-small-end-padding {
  --inner-padding-end: 0.5em;
}

.sneat-tiny-end-padding {
  --inner-padding-end: 0.25em;
}

.sneat-no-end-padding-margin {
  --inner-padding-end: 0;
  --margin-end: 0;
}

.sneat-no-end-padding {
  --inner-padding-end: 0;
}

.sneat-small-end-margin {
  margin-right: 0.5em;
}

.sneat-tiny-end-margin {
  margin-right: 0.25em;
}

ion-buttons.sneat-no-horizontal-margins ion-button {
  margin-right: 0;
  margin-left: 0;
}

.sneat-no-end-margin {
  margin-right: 0;
}

.sneat-no-bottom-margin {
  margin-bottom: 0;
  --margin-bottom: 0;
}

.sneat-no-bottom-padding {
  padding-bottom: 0;
  --padding-bottom: 0;
}

ion-item.sneat-no-bottom-border {
  --border-width: 0;
  --inner-border-width: 0;
}

ion-modal.auto-height {
  --height: auto;

  //.modal-wrapper {
  //width: 90vw;

  .ion-page {
    position: relative;
    contain: content;
    max-height: 90vh;

    .modal-content {
      overflow: auto;
    }
  }

  //}
}

@media screen and (max-width: 766px) {
  // 768=PAL @ https://en.wikipedia.org/wiki/Computer_display_standard
  .sneat-hide-if-width-less-766 {
    display: none;
  }
  .sneat-hide-if-width-less-766 {
    font-size: smaller;
  }
  .sneat-hide-if-width-less-766 {
    font-size: small;
  }
}

@media screen and (max-width: 530px) {
  // 640=VGA @ https://en.wikipedia.org/wiki/Computer_display_standard
  .sneat-hide-if-width-less-638 {
    display: none;
  }
  .sneat-smaller-if-width-less-638 {
    font-size: smaller;
  }
  .sneat-small-if-width-less-638 {
    font-size: small;
  }
}

@media screen and (max-width: 530px) {
  .sneat-hide-if-width-less-530 {
    display: none;
  }
  .sneat-smaller-if-width-less-530 {
    font-size: smaller;
  }
  .sneat-small-if-width-less-530 {
    font-size: small;
  }
}

@media screen and (max-width: 420px) {
  .sneat-hide-if-width-less-420 {
    display: none;
  }
  .sneat-smaller-if-width-less-420 {
    font-size: smaller;
  }
  .sneat-small-if-width-less-420 {
    font-size: small;
  }
}

@media screen and (min-width: 321px) {
  .sneat-hide-if-width-greater-320 {
    display: none;
  }
}

@media screen and (max-width: 320px) {
  .sneat-hide-if-width-less-320 {
    display: none;
  }
  .sneat-smaller-if-width-less-320 {
    font-size: smaller;
  }
  .sneat-small-if-width-less-320 {
    font-size: small;
  }
}

@media screen and (max-width: 240px) {
  .sneat-hide-if-width-less-240 {
    display: none;
  }
  .sneat-smaller-if-width-less-240 {
    font-size: smaller;
  }
  .sneat-small-if-width-less-240 {
    font-size: small;
  }
}

ion-popover {
  --min-width: 350px; // 350px is <ion-datetime> width TODO: This sucks!!!
}

ion-item.ion-item-no-border {
  --inner-border-width: 0;
  --border-width: 0;
}

.sneat-label-color-medium .label-text {
  //color: #92949c;
  color: var(--ion-color-medium);
}

.ion-input.sneat-input-padding-top {
  padding-top: 10px;
}

.canceled {
  text-decoration: line-through;
}

.deleting-list-item {
  text-decoration: line-through;
}

.no-border-for-last-child {
  :last-child {
    --border-style: none !important;
  }
}

.sneat-badges {
  ion-badge {
    font-weight: normal;
    margin-left: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}