.dig-drop-down-menu {

  $drop-down-menu-height: $desktop-toolbar-height !default;

  * { @include ease-out(); }

  position: relative;
  display: inline-block;
  height: $drop-down-menu-height;
  font-size: $desktop-drop-down-menu-font-size;


  &.dig-open {
    .dig-menu-control {
      &,
      &:hover,
      &:focus {

        .dig-menu-control-bg {
          opacity: 0;
        }

        .dig-menu-label {
          top: ($drop-down-menu-height / 2);
          opacity: 0;
        }
      }
    }

    .dig-menu {
      opacity: 1;
    }
  }

  .dig-menu-control {
    cursor: pointer;
    @include clearfix();
    height: 100%;

    .dig-menu-control-bg {
      background-color: $menu-background-color;
      height: 100%;
      width: 100%;
      //opacity: 0;
    }

    .dig-menu-control-bg-tran {
      background-color: $menu-background-color;
      height: 100%;
      width: 100%;
      opacity: 0;
    }

    &:hover,
    &:focus {
      .dig-menu-control-bg {
        //opacity: 1;
        background-color: $menu-background-hover-color
      }

      .dig-menu-control-bg-tran {
        opacity: 1;
      }
    }

    .dig-menu-label {
      line-height: $drop-down-menu-height;
      position: absolute;
      padding-left: $desktop-gutter;
      top: 0;
      opacity: 1;
    }

    .dig-menu-drop-down-icon {
      position: absolute;
      top: (($drop-down-menu-height - 24px) / 2);
      right: $desktop-gutter-less;
      * {
        fill: $drop-down-menu-icon-color;
      }
    }

    .dig-menu-control-underline {
      border-top: solid 1px $border-color;
      margin: 0 $desktop-gutter;
    }
  }

  .dig-menu {
    .dig-menu-item {
      padding-right: ($icon-size + $desktop-gutter-less + $desktop-gutter-mini);
      height: $desktop-drop-down-menu-item-height;
      line-height: $desktop-drop-down-menu-item-height;
      white-space: nowrap;
    }
  }
}

.dig-drop-down-menu-mini {

  $drop-down-menu-height: $desktop-toolbar-height / 2 !default;

  * { @include ease-out(); }

  position: relative;
  display: inline-block;
  height: $drop-down-menu-height;
  font-size: $desktop-drop-down-menu-font-size;


  &.dig-open {
    .dig-menu-control {
      &,
      &:hover,
      &:focus {

        .dig-menu-control-bg {
          opacity: 0;
        }

        .dig-menu-label {
          top: ($drop-down-menu-height / 2);
          opacity: 0;
        }
      }
    }

    .dig-menu {
      opacity: 1;
    }
  }

  .dig-menu-control {
    cursor: pointer;
    @include clearfix();
    height: 100%;

    .dig-menu-control-bg {
      background-color: $menu-background-color;
      height: 100%;
      width: 100%;
      //opacity: 0;
    }

    .dig-menu-control-bg-tran {
      background-color: $menu-background-color;
      height: 100%;
      width: 100%;
      opacity: 0;
    }

    &:hover,
    &:focus {
      .dig-menu-control-bg {
        //opacity: 1;
        background-color: $menu-background-hover-color
      }

      .dig-menu-control-bg-tran {
        opacity: 1;
      }
    }

    .dig-menu-label {
      line-height: $drop-down-menu-height;
      position: absolute;
      padding-left: $desktop-gutter;
      top: 0;
      opacity: 1;
    }

    .dig-menu-drop-down-icon {
      position: absolute;
      top: (($drop-down-menu-height - 24px) / 2);
      right: $desktop-gutter-less;
      * {
        fill: $drop-down-menu-icon-color;
      }
    }

    .dig-menu-control-underline {
      border-top: solid 1px $border-color;
      margin: 0 $desktop-gutter;
    }
  }

  .dig-menu {
    .dig-menu-item {
      padding-right: ($icon-size + $desktop-gutter-less + $desktop-gutter-mini);
      height: $desktop-drop-down-menu-item-height;
      line-height: $desktop-drop-down-menu-item-height;
      white-space: nowrap;
    }
  }
}