pragma-dropdown-menu {
  position: relative;

  label {
    cursor: pointer;
  }

  input[type="checkbox"] {
    display: none;
  }

  .header {
    @include flex();
    height: 100%;
    align-items: center;

    span {
      @include stretch();
    }

    icon {
      margin-left: $default-padding;
    }
  }

  ul {
    position: absolute;
    display: none;
    z-index: 100;
    background: var(--color-ui-4);
    color: var(--color-brand-dark);
    border-radius: $border-radius;
  }

  li {
    position: relative;
    padding: $default-padding;
    @include flex();
    @include flex-row();
    align-items: center;

    icon {
      margin-right: $half-padding;
    }
  }

  input:checked ~ ul {
    @include flex();
    @include flex-column();
  }

  li:hover {
    background: var(--color-highlight);
  }

  li:hover:before, li:hover:after {
    content: "";
    position: absolute;
    top: 0;
    width: $default-padding;
    height: 100%;
    background: var(--color-highlight);
  }

  li:hover:before {
    left: 0;
    margin-left: -$default-padding;
  }

  li:hover:after {
    right: 0;
    margin-right: -$default-padding;
  }
}