@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$menu-bg-color: map-get($denali-grey-colors,"100") !default;
$menu-corner-radius: $border-radius-sm !default;
$menu-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16) !default;
$menu-border-color: map-get($denali-grey-colors,"400") !default;
$menu-border-width: 2px !default;
$menu-border-style: solid !default;
$menu-line-break-size: 2px !default;
$menu-line-break-color: map-get($denali-grey-colors,"400") !default;

@mixin menus-default {
  .menu {
    white-space: nowrap;
    position: relative;

    &.is-right {
      .menu-content {
        left: 100%;
        transform: translateX(-100%);
      }
    }

    &.is-left {
      .menu-content {
        left: 0%;
        transform: translateX(0%);
      }
    }

    &.is-active {
      .menu-trigger {
        pointer-events: none;
      }
      .menu-content,
      .menu-content:hover {
        opacity: 1;
        visibility: visible;
      }
    }

    .menu-content {
      height: auto;
      opacity: 0;
      background: $menu-bg-color;
      font-size: 14px;
      position: absolute;
      padding: 15px 20px;
      border-radius: 8px;
      visibility: hidden;
      box-shadow: $menu-shadow;
      z-index: 100;
      left: 50%;
      transform: translateX(-50%);

      // Added
      border-color: $menu-border-color;
      border-width: $menu-border-width;
      border-style: $menu-border-style;
      border-radius: $menu-corner-radius;
      -webkit-transition: all 0.3s 0.1s;
      -moz-transition: all 0.3s 0.1s;
      -o-transition: all 0.3s 0.1s;
      transition: all 0.3s 0.1s;

      >* {
        display: block;
        white-space: nowrap;
        padding: 5px 0px;
        height: unset;
      }

      hr {
        background-color: $menu-line-break-color;
        height: $menu-line-break-size;
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 0px;
      }
    }

    .menu-trigger:hover+.menu-content,
    .menu-trigger:focus+.menu-content,
    .menu-content:hover {
      opacity: 1;
      visibility: visible;
    }
  }
}

@mixin menus-theme {
  .menu {
    .menu-content {
      background: $menu-bg-color;
      box-shadow: $menu-shadow;
      border-color: $menu-border-color;
      border-width: $menu-border-width;
      border-style: $menu-border-style;
      border-radius: $menu-corner-radius;

      hr {
        background-color: $menu-line-break-color;
        height: $menu-line-break-size;
      }
    }
  }
}