@import "normalize.css/normalize.css";

:root {
  /* Font definitions */
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  /* Color definitions*/
  --bright-turquoise-color: #00e4d4;
  --raisin-black-color: #212121;
  --cultured-color: #f6f6f6;
  --platinum-color: #e6e6e615;

  --primary-color: var(--bright-turquoise-color);

  /* Color applications */
  color: var(--cultured-color);
  background-color: var(--raisin-black-color);

  /* Button definitions */
  --button-hover-outline: outline-offset 200ms ease;
  --button-hover-outline-offset: -6px;

  /* Menu definitions */
  --menu-separator-color: var(--platinum-color);
  --menu-item-height: 4rem;
  --menu-item-width: 4rem;
  --menu-width: 4rem;

  /* Option selections */
  --selected-item-background-color-fallback: var(--bright-turquoise-color);
  --selected-item-background-gradient: linear-gradient(
    90deg,
    rgba(0, 228, 212, 0.4) 0%,
    rgba(33, 33, 33, 0) 100%
  );
  --selected-item-border-left: 2.5px solid var(--primary-color);
  --placeholder-border-left: 2.5px solid transparent;

  /* Animation definitions */
  --animation-starting-opacity: 0;
  --animation-ending-opacity: 1;
  --animation-enter-transform: scale(0.96);
  --animation-exit-transform: scale(0.96);
  --animation-opacity-transition-duration: 300ms;
  --animation-transform-transition-duration: 250ms;
}

body,
html,
#root {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  text-align: center;
}

/* Animation definitions  */
.fade-enter {
  opacity: var(--animation-starting-opacity);
  transform: var(--animation-enter-transform);
}

.fade-enter-active {
  opacity: var(--animation-ending-opacity);
  transform: scale(1);
  transition: opacity var(--animation-opacity-transition-duration),
    transform var(--animation-transform-transition-duration);
}

/* Fade-out animation is not displayed. I believe it's because 
the component is unmounted before the animation can finish*/
.fade-exit {
  opacity: var(--animation-ending-opacity);
  transform: scale(1);
}

.fade-exit-active {
  opacity: var(--animation-starting-opacity);
  transform: var(--animation-exit-transform);
  transition: opacity var(--animation-opacity-transition-duration),
    transform var(--animation-transform-transition-duration);
}
