@import "../../app/vars.less";

.footer {
  display: flex;
  flex-direction: column;
  background-color: @background-color;
  align-items: center;
  justify-content: center;
  flex-shrink: 1;
  padding: 4px;
}

.footer_compact {
  .footer;
  flex-direction: row;
  flex: 1;
  padding: 0;
  gap: 10px;
}

.footer__datetime {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__datetime_compact {
  .footer__datetime;
  flex-direction: row;
  gap: 10px;
}

.time {
  font-size: 24vh;
  font-weight: bold;
}

.time_compact {
  font-size: 12vh;
  font-weight: bold;
}

.date {
  font-size: 18vh;
}

.date_compact {
  .time_compact;
}

.footer__controls {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 34px;
}