/*!
 * 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/>.
 */
@use 'sass:math';

$width: 108px;

simple-swiper {
  container-type: inline-size;
  --swiper-slide-width: #{$width};

  ion-item {
    @each $i in 7, 6, 5, 4, 3, 2, 1 {
      $max: #{($width + 8px) * $i};
      @container (inline-size < #{$max}) {
        --swiper-slide-width: #{math.div(100cqi, $i)};
      }
    }
  }
}

ion-item {
  height: 96px;
  --border-radius: var(--border-radius-default);
  --inner-padding-start: unset;
  --inner-padding-end: unset;
  --padding-start: unset;
  --padding-end: unset;

  > div {
    width: 100%;
    height: 100%;
  }

  div,
  ion-label {
    white-space: normal;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-sm);
  }

  &::part(native) {
    height: 100%;
    width: 100%;
  }
}

.log-in-hint {
  padding: var(--spacing-xl);
  height: 100%;
  box-shadow: none;
  background: var(--ion-color-light-tint);
}
