/* dropdown
 * Source: https://codepen.io/markcaron/pen/wdVmpB
 *
 * TODO: change styles
 * */

.dropdown {
  position: relative;
  display: inline-block;

  & > input[type="checkbox"] {
    position: absolute;
    left: -100vw;
  }

  & > label {
    display: inline-block;
    padding: 6px 15px;
    color: #333;
    line-height: 1.5em;
    text-decoration: none;
    border: 1px solid #8c8c8c;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    &:hover {
      border-color: #333;
    }

    &:after {
      content: "▲";
      font-size: 10px;
      display: inline-block;
      margin-left: 6px;
      vertical-align: top;
    }
  }

  & > ul {
    position: absolute;
    z-index: 999;
    display: block;
    left: -100vw;
    bottom: calc(1.5em + 14px);
    border: 1px solid #8c8c8c;
    background: #fff;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
    -moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
    box-shadow: 0 3px 8px rgba(0,0,0,.15);

    a {
      display: block;
      padding: 6px 15px;
      text-decoration: none;
      color: #333;

      &:hover, &:focus {
        background: #ececec;
      }
    }
  }

  & > input[type="checkbox"]:checked {
    & ~ ul {
      left: 0;
    }

    & + label:after {
      content: "▼";
    }
  }
}