* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
}

a {
  color: #ffffff;
}

a:hover {
  color: #bfccda;
}

header {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  padding: 1em;

  .title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.5em;
    h4 {
      font-weight: 400;
    }

    .rhs {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }
  }
}

#app {
  height: 0;
  display: flex;
  flex-grow: 1;
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
    width: 100%;
  }

  .lhs {
    padding: 1em;
    width: 20em;
    min-width: 20em;
    height: 100%;
    display: flex;
    flex-direction: column;

    #legend {
      flex-grow: 1;
      overflow: auto;
    }
  }
  .rhs {
    height: 100%;
    flex-grow: 1;
    display: flex;
    min-width: 0;

    #chart {
      flex-grow: 1;
      overflow: auto;
    }
  }

  #chart {
    position: relative;
  }
  #bar,
  #scatter,
  #choro {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  &.Bar {
    .lhs {
      #form {
        #SortDirection,
        #bar-width-slider {
          display: block;
        }
      }
    }
    #bar {
      opacity: 1;
      pointer-events: all;
      .area {
        fill: steelblue;
        clip-path: url(#clip);
      }
      .zoom {
        cursor: move;
        fill: none;
        pointer-events: all;
      }
      rect {
        transition: opacity 0.3s;
        &.hidden {
          opacity: 0;
          pointer-events: none;
        }
      }
      .data-group,
      .x-axis {
        clip-path: url(#clip);
      }
      .disclaimer {
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
        &.show {
          opacity: 1;
        }
      }
      .data-point {
        &.selected {
          rect {
            stroke: orangered;
            stroke-width: 3px;
          }
        }
      }
    }
  }
  &.Scatter {
    #scatter {
      opacity: 1;
      pointer-events: all;

      .data-point {
        transition: opacity 0.3s;
        &.hidden {
          opacity: 0;
          pointer-events: none;
        }
        &.selected {
          stroke: orangered;
          stroke-width: 3px;
        }
      }
    }
  }
  &.Choropleth {
    #choro {
      opacity: 1;
      pointer-events: all;
    }
    .lhs {
      #form {
        #map-attribute-toggle {
          display: block;
        }
      }
    }
  }
}

#tooltip {
  position: fixed;
  opacity: 0;
  transition: 1s;
  background: #fff;
  box-shadow: 3px 3px 3px 0px rgb(92 92 92 / 0.5);
  border: 1px solid #ddd;
  padding: 8px;
  min-width: 160px;
  color: #333;
  border-radius: 0.5em;
  font-size: large;
}

#choro {
  .county-boundary {
    stroke: #fff;
    stroke-width: 0.125px;
  }
  .county-boundary.selected {
    stroke: orange;
    stroke-width: 2px;
  }

  .county-boundary:hover,
  .state:hover {
    fill: orange;
  }
  #state-borders {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
}