ion-header {
  ion-toolbar {

    &.dark {
      color: #FFF;
    }

    &.light {
      --color: #333;
    }

    ion-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .name {
        font-size: 15px;
      }

      .state {
        height: 0;
        font-size: 10px;
        font-weight: 400;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        transition: height 0.5s, opacity 1s;
        opacity: 0;

        i {
          margin-left: 3px;
        }
      }

      .showState {
        height: 12px;
        opacity: 1;
      }
    }

    ion-buttons {
      ion-button {
        width: 2.2rem;

        i {
          font-size: 1.4rem;
        }
      }
    }
  }
}

ion-content {
  transition: filter 0.3s;
  // --background: #AAA;
}

ion-content {
  &.offline {
    filter: grayscale(30%);
  }

  &.blur {
    filter: blur(3px);
  }

  &.exitBlur {
    filter: blur(0px)
  }
}




[redpoint] {
  top: 6px;
  right: 6px;
}

.animate__animated {
  --animate-duration: 0.3s;
}