@import "./../styles/index.scss";

.menu-wrapper{
  position: absolute;
  top: 0;
  left: 0;
}

.menu-container{
  box-shadow: 1px 7px 19px 0 rgba(0, 0, 0, 0.14);
  border: solid 1px transparent;
  border-radius: 6px;
  position: absolute;
  width: auto;
  z-index: 11;
  
  &.menu-arrow{
    &:before, &:after{
      border-style:solid; 
      content:'';
      position:absolute; 
    }

    &.arrow-top-left{
      &:before, &:after{
        border-width:0 7px 7px;
      }

      &:before{
        left: 7px;
        top: -7px;
      }

      &:after{
        left: 7px;
        top: -6px;
      }
    }

    &.arrow-top-right{
      &:before, &:after{
        border-width:0 7px 7px;
      }

      &:before{
        right: 7px;
        top: -7px;
      }

      &:after{
        right: 7px;
        top: -6px;
      }
    }
  }
}

.menu-overlay{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_POPOVER, $_BORDER_COLOR_POPOVER, $_COLOR_TEXT_POPOVER){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .menu-container{
      background-color: $_BACKGROUND_COLOR_POPOVER;
      border-color: $_BORDER_COLOR_POPOVER;

      &.menu-arrow{
        &:before{
          border-color:$_BORDER_COLOR_POPOVER transparent;
        }
    
        &:after{
          border-color:$_BACKGROUND_COLOR_POPOVER transparent;
        }
      }

      li{
        color: $_COLOR_TEXT_POPOVER;
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_POPOVER_LIGHT, $_BORDER_COLOR_POPOVER_LIGHT, $_COLOR_TEXT_POPOVER_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_POPOVER_DARK, $_BORDER_COLOR_POPOVER_DARK, $_COLOR_TEXT_POPOVER_DARK);