.dropmenu {

  @include breakpoint(md) {
    display: none;
  }

  ul {
    white-space: nowrap;
    margin: 0;

    &:not(.submenu) {
    display: flex;
    }

    li {
      position: relative;
      margin: 0;

      a {
        text-decoration: none;
        padding: $dropmenu-vert-padding ($dropmenu-horiz-padding + $dropmenu-child-padding) $dropmenu-vert-padding $dropmenu-horiz-padding;
        display: block;
        color: $dark-color;

        &:hover, &:focus, &.active {
            color: $dropmenu-hover-text !important;
        }

        &:before {
          content: '\f107';
          font-family: 'Font Awesome 5 Free';
          vertical-align: middle;
          float: right;
          margin-right: - (2 *$dropmenu-child-padding);
        }

        &:only-child {
          padding-right: $dropmenu-horiz-padding;

          &:before {
            content: '';
          }
        }
      }
    }

    ul li a:before {
      content: '\f105';
    }

    ul {
      position: absolute;
      top: 100%;
      list-style: none;
      background: $dropmenu-bg;
      box-shadow: $dropmenu-shadow;
      opacity: 0;
      pointer-events: none;

      ul {
        position: absolute;
        left: 100%;
        top: 0;
      }
    }

  }

  & > ul > li {
    display: inline-block;
  }

  // Animation options
  &.animated {
    ul li {
      transition: background .7s, color 0.5s;
    }

    ul li:hover > ul {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }

    ul ul {
      transition: transform .3s, opacity .5s;
      opacity: 0;
      transform: translateY(-10px);
    }
  }
}

.submenu {

  display: block;
  li {

    &:first-child {
      a {
        padding: ($dropmenu-vert-padding * 2) ($dropmenu-horiz-padding + $dropmenu-child-padding) $dropmenu-vert-padding $dropmenu-horiz-padding;
        
        @include breakpoint(md) {
          padding: unset;
        }
      }
    }
    &:last-child {
      a {
        padding: $dropmenu-vert-padding ($dropmenu-horiz-padding + $dropmenu-child-padding) ($dropmenu-vert-padding * 2) $dropmenu-horiz-padding;
        
        @include breakpoint(md) {
          padding: unset;
        }
      }
    }
  }
}