/*
 * 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";

/* Swiper bundle */
@import 'swiper/css/bundle';

/* Animation */
@import "~animate.css/animate.min.css";


body {
  background-color: var(--ion-color-dark);
}

ion-content {
  --background: linear-gradient(135deg, var(--ion-color-dark), var(--ion-color-primary));
}

ion-list {
  border-radius: 8px;
  margin-bottom: 8px;
  background-color: var(--ion-color-primary);
}

ion-label {
  font-size: 16px;
  font-weight: 700;
}

// Action Sheet styles
ion-action-sheet {
  &.custom-action-sheet {
    ion-backdrop {
      background-color: #000;
      opacity: 0.6;
    }

    .action-sheet-group {
      background: var(--ion-color-dark);
    }

    .action-sheet-title {
      color: var(--ion-color-tertiary);
      font-weight: 700;
    }

    .action-sheet-button,
    .action-sheet-button.ion-focused {
      color: #fff;

      &:hover {
        color: var(--ion-color-tertiary);
      }
    }

    .action-sheet-icon {
      color: var(--ion-color-tertiary);
    }
  }
}

/* Searchbar */
ion-searchbar.sc-ion-searchbar-ios-h {
  --cancel-button-color: var(--ion-color-medium);
  --background: var(--ion-color-dark-tint);
  --border-radius: 8px;
}

@media (any-hover: hover) {
  ion-action-sheet.custom-action-sheet.action-sheet-button:hover {
    color: var(--ion-color-tertiary);
  }
}

/* Hero */
.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 30px;

  ion-avatar {
    text-align: center;
    margin-bottom: 3px;

    .avatar-icon-placeholder {
      font-size: 128px;
    }
  }
}

// HR
hr {
  background: var(--ion-color-primary);
  margin: 22px 0;

  &.hr-medium {
    margin: 32px 0;
  }
}
