$fuzzy-gray-muted: #DDD;
$fuzzy-gray-loud: #AAA;
$fuzzy-accent: #51c4c4;
$fuzzy-zindex: 100;

.fuzzy-picker-background {
  background: rgba(0, 0, 0, 0.2);

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: 300px; // fall back
  padding-top: 25vh;

  z-index: $fuzzy-zindex;

  .fuzzy-picker {
    max-width: 600px;

    background: #FFF;
    border: 1px solid $fuzzy-gray-muted;
    border-radius: 4px;
    box-shadow: 0px 0px 16px #333;
    font-size: 1rem;

    display: flex;
    flex-direction: column;

    .fuzzy-picker-top-text {
      color: $fuzzy-gray-loud;
      margin-top: 0.5em;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      font-size: 0.8em;
      user-select: none;

      .fuzzy-picker-label {
        float: left;
      }
      .fuzzy-picker-instructions {
        float: right;
        span {
          margin: 0.35em;
        }
      }
    }

    input[type=text] {
      border: 1px solid #DDD;
      border-radius: 4px;
      outline: none;

      flex: 1;
      font-size: 2.4em;
      padding: 1rem;
      margin: 0.5rem;
    }

    ul {
      list-style-type: none;
      padding-left: 0px;
      margin-top: 0.2em;
      margin-bottom: 0.5em;

      li {
        margin: 0.1em 0.5rem;
        padding: 0.6em 0.5em;
        border-radius: 4px;
        cursor: pointer;

        &.selected {
          background-color: $fuzzy-accent;
          color: #FFF;
        }
      }
    }
  }
}
