/*!
 * Copyright (C) 2022 StApps
 *  This program is free software: you can redistribute it and/or modify it
 *  under the terms of the GNU General Public License as published by the Free
 *  Software Foundation, version 3.
 *
 *  This program is distributed in the hope that it will be useful, but WITHOUT
 *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 *  more details.
 *
 *  You should have received a copy of the GNU General Public License along with
 *  this program. If not, see <https://www.gnu.org/licenses/>.
 */

// http://ionicframework.com/docs/theming/
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/core.css";

@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";
@import "~@ionic/angular/css/display.css";

// https://swiperjs.com/angular#styles
@import "swiper/scss";
@import "swiper/scss/controller";

// @import 'material-symbols/rounded.scss';
@import "./theme/material-symbols.scss";

/* StApps */

stapps-icon {
  --size-unit: 1px;
  --weight: 400;
  --grade: 0;
  --fill: 0;
}

.map-location-pin {
  font-variation-settings: 'FILL' 1;
  color: var(--ion-color-primary);

  &::before {
    content: attr(name);
    position: absolute;
    top: 0;
    left: 0;
    font-variation-settings: 'FILL' 0;
    color: white;
    z-index: -1;
  }
}

ion-item {
  h2.name {
    font-weight: bold;
  }
  ion-thumbnail {
    background: transparent;
    --size: 36px;
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 0;
    ion-icon {
      width: 100%;
      height: 100%;
      color: white;
      display: block;
    }
  }
}

ion-item, ion-card.compact {
  ion-grid, ion-col {
    padding-inline-start: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.centeredMessageContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 50vh;
  margin: 20px;

  ion-icon {
    font-size: 64px;
  }

  ion-label {
    font-size: x-large;
  }
}

.add-event-popover {
  --width: fit-content;
  --max-width: 95%;
}

ion-card.bold-header {
  ion-card-header {
    font-weight: bold;
  }
}