/* Dropotron */
.dropotron {
  background: _palette(accent2-transparent);
  border-radius: _size(border-radius);
  box-shadow: 0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
  list-style: none;
  margin-top: calc(-0.25em + 1px);
  min-width: 12em;
  padding: 0.25em 0;

  > li {
    border-top: solid 1px rgba(255, 255, 255, 0.035);
    padding: 0;

    a,
    span {
      border: 0;
      color: _palette(fg);
      display: block;
      padding: 0.1em 1em;
      text-decoration: none;
    }

    &:first-child {
      border-top: 0;
    }

    &.active {
      > a,
      > span {
        color: _palette(accent1);
      }
    }
  }

  &.level-0 {
    font-size: 0.8em;
    margin-top: 1em;

    @include breakpoint(laptop) {
      font-size: 1em;
    }

    &::before {
      @include vendor('transform', 'rotate(45deg)');

      background: _palette(accent2);
      content: '';
      display: block;
      height: 1em;
      position: absolute;
      right: 1.5em;
      top: -0.5em;
      width: 1em;
    }
  }
}

body.landing {
  .dropotron {
    &.level-0 {
      margin-top: 0;
    }
  }
}