/*!
 * 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/>.
 */
:host {
  $height: calc(var(--font-size-md) + 2 * var(--spacing-sm));

  transform: translateY(calc(-1 * $height));

  display: grid;

  width: 100%;
  height: $height;

  font-size: var(--font-size-md);
  font-weight: bold;
  line-height: var(--font-size-md);

  transition: all 150ms ease;

  &.is-offline,
  &.has-error {
    transform: translateY(0);
  }

  > ion-button {
    --border-radius: 0;
    --padding-top: 0;
    --padding-bottom: 0;

    z-index: 0;

    grid-column: 1;
    grid-row: 1;

    margin: 0;

    opacity: 0;

    transition: all 150ms ease;

    &.close {
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 0;
      bottom: 0;
      transform: translateY(-50%);

      height: 100%;
      margin: 0;

      color: var(--ion-color-danger-contrast);
    }
  }

  &.is-offline > .offline-button,
  &.has-error > .close,
  &.has-error > .error-button {
    opacity: 1;
  }
}

.spin {
  animation: loading 1s ease running 3;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
