/*!
 * Copyright (C) 2023 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/>.
 */

$header-height: 50px;
$hours-width: 40px;

.header {
  height: $header-height;
  background-color: var(--ion-color-light);
  position: relative;

  .left-button,
  .right-button {
    color: var(--ion-color-medium-shade);
    position: absolute;
    z-index: 99;
    height: 100%;
    margin: 0;
    --padding-start: 0;
    --padding-end: 0;
  }
  .left-button {
    left: 0;
    padding: 0 var(--spacing-sm);
  }
  .right-button {
    right: 0;
    padding: 0 var(--spacing-sm);
  }

  .day-labels {
    ion-button {
      width: unset;
      color: var(--ion-color-light-contrast);
      overflow: visible !important;
    }
  }

  .header-swiper {
    background-color: var(--ion-color-light);
  }
}

.full-height {
  height: 100%;
}

.day-labels {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  ion-button {
    width: 100%;
    height: 100%;

    text-transform: none;
    ion-label {
      overflow: visible !important;
    }
  }
}

ion-content {
  overflow-y: auto;
}

.schedule-wrapper {
  display: grid;
  grid-template-columns: 40px calc(100% - 40px); // swiper.js can't calculate width when using 1fr instead of 100%
  height: 100%;

  .hours-wrapper {
    z-index: 100;
    background-color: var(--ion-background-color);

    .hour-lines {
      width: 40px;
      height: 70px;
      border-right: 1px solid var(--ion-item-border-color);
      text-align: center;
      top: 0;
      position: absolute;
      font-weight: var(--font-weight-bold);
      background-color: var(--ion-background-color);
    }
  }

  .infinite-swiper-wrapper {
    width: 100%;
  }
}

.date-header {
  border-bottom: 1px solid var(--ion-item-border-color);
  padding: var(--spacing-sm) auto;
  height: fit-content;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-align: center;
}

.day-labels > ion-button[disabled] {
  opacity: 1;
}

div {
  height: 100%;
}
