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

  height: $height;
  width: 100%;

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

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

  transition: all 150ms ease;

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

  > ion-button {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    --border-radius: 0;
    opacity: 0;
    --padding-top: 0;
    --padding-bottom: 0;
    transition: all 150ms ease;
    z-index: 0;

    &.close {
      height: 100%;
      margin: 0;
      position: absolute;
      right: 0;
      top: 50%;
      bottom: 0;
      transform: translateY(-50%);
      z-index: 1;
      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);
  }
}
