<template>
  <div id="app">
    <!--<div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>
    </div>-->
    <router-view />
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --color-accent-1: #a9d8d8;
  --color-accent-2: #00a6a6;
  --color-accent-3: #fe4a49;
  --color-background: #fff;
  --color-label-background: #ddd;
  --color-tooltip-background: #aaa;
  --color-icon: #333130;

  --color-manually-edited: #88a509;
  --color-discarded: #888888;
  --color-not-found: #ad7e79;
  --color-no-snow: #6696c3;
  --color-normal: #555555;
  --color-average: #5d8283;
}

.icon {
  cursor: pointer;
}

.iconDisabled {
  cursor: default;
}

.icon svg {
  fill: var(--color-icon);
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.icon:hover svg {
  transform: scale(1.4);
}

.iconDisabled svg {
  opacity: 40%;
  transition: none;
}

.iconDisabled:hover svg {
  transform: none;
}

.card {
  background: var(--color-label-background);
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
