/*!
 * 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/>.
 */

ion-card {
  width: inherit;
  z-index: 2;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;

  @each $name in lecture, exercise, default {
    &.#{$name}Card {
      --background: var(--calender-#{$name}-card);

      ion-card-title,
      ion-card-subtitle span,
      ion-card-content ion-note,
      ion-card-content ion-text {
        color: var(--calender-#{$name}-card-contrast);
      }

      &:after {
        background: linear-gradient(
          rgba(var(--calender-#{$name}-card-rgb), 0%),
          rgba(var(--calender-#{$name}-card-rgb), 100%)
        );
      }
    }
  }

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 33%;
    width: 100%;
  }

  ion-card-header {
    height: available;
    padding-bottom: var(--spacing-xs);

    ion-card-title {
      overflow-wrap: break-word;
    }

    ion-card-subtitle {
      display: flex;
      ion-icon.icon-white {
        color: var(--ion-color-primary-contrast);
        margin-right: var(--spacing-xs);
      }
    }
  }

  ion-card-header,
  ion-card-title,
  ion-card-subtitle span,
  ion-card-content ion-note {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-family: var(--headline-font-family);
    text-overflow: ellipsis;
  }

  ion-card-content .place-name {
    display: block;
    font-family: var(--headline-font-family);
  }

  ion-card-content .place-name {
    display: block;
  }

  div {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 255) 100%);
  }
}
