@import "@styles/core.scss";

.ideStatusBar {
  @include fix-height-panel(40px);
  flex-direction: row;
  align-items: center;
  background: var(--bgcolor-statusbar);
}

.sectionWrapper {
  display: flex;
  margin: 0 8px;
  width: 100%;
  flex-direction: row;
  flex-shrink: 1;
  flex-grow: 1;
  align-items: center;
}

.label {
  font-size: 0.8em;
  color: var(--color-statusbar-label);
  padding: 4px;
  border-radius: 4px;
}

.isMonospace {
  font-family: monospace;
  font-size: 1em;
}

.isError {
  background-color: var(--bgcolor-errorLabel);
}

.labelSeparator {
  width: 4px;
}

.sectionSeparator {
  width: 8px;
}

.section {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  height: 100%;
  margin: 0 4px;
  align-content: flex-start;
  align-items: center;
  justify-items: start;
}

.infiniteRotate {
  animation: rotate-animation 1s infinite linear;
}

@keyframes rotate-animation {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.8, 1);
  }
  50% {
    transform: scale(0.05, 1);
  }
  75% {
    transform: scale(0.8, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
