/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --connection-status-font-size: var(--default-font-size-small);
  --connection-status-font-color: #fff;
  --connection-status-height: calc(var(--default-padding-large) * 1.5);
  --connection-status-transition-duration: var(--default-transition-duration);
  --connection-status-translate-size: calc(
    0px - var(--connection-status-height)
  );
}

.container {
  all: initial;
  position: absolute;
  z-index: var(--z-index-connection-status);
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: var(--connection-status-height);
  cursor: default;
  user-select: none;
  transition: background var(--connection-status-transition-duration) ease;
  font-family: var(--default-font-family);
  font-size: var(--connection-status-font-size);
  color: var(--connection-status-font-color);
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.wrapper {
  position: relative;
  height: 0;
}

.online {
  background-color: var(--color-success);
}

.connecting {
  background-color: var(--color-danger);
}

.updating {
  background-color: var(--color-warning);
}

/* Animation */
/* TODO: rethink animation */
.enter {
  /*transform: translateY(var(--connection-status-translate-size));*/
  margin-top: var(--connection-status-translate-size);
}

.enterActive {
  /*transform: translateY(0);*/
  margin-top: 0;
  transition: margin var(--connection-status-transition-duration) ease-in;
}

.leave {
  /*transform: translateY(0);*/
  margin-top: 0;
}

.leaveActive {
  /*transform: translateY(var(--connection-status-translate-size));*/
  margin-top: var(--connection-status-translate-size);
  transition: margin var(--connection-status-transition-duration) ease-out;
}