$button-width : 42px;
$button-border : 2px solid black;
.menubar{


  &.paragraph-menubar {

    position: fixed;
    display:flex;
    flex-direction: column;

    top: 100px;
    right: 25px;

    button {
      cursor: pointer;
      width: $button-width;
      height: $button-width;
      background-color: white;
      border-left: $button-border ;
      border-right: $button-border ;
      border-bottom: $button-border ;
      border-top :none;
      &:nth-child(1){
        border-top : $button-border ;
      }

      &:hover{
        color: white;
        background-color: black;
      }
    }
  }

  &.char-menubar{

    top: 10px;
    display: block;
    width : 75%;
    margin : 50px 0px 100px 0px;
    ul, li {
       padding:0;
       margin: 0;
    }



    & > ul {
      display: flex;
      justify-content:flex-start;
      position: relative;
      li, button{
        cursor: pointer;
      }
      ul {
        display:none;
        position: absolute;
      }
      & > li {
        width: 150px;
        list-style-type: none;
        border-top: $button-border ;
        border-right: $button-border ;
        border-bottom: $button-border ;
        &:nth-child(1){
          border-left: $button-border ;
        }
      }
      li:hover{
        ul {
          display: flex;
          flex-direction: column;
          position: absolute;
          width: 152px;
          li{
            border-left: $button-border ;
            border-right: $button-border ;
            border-bottom: $button-border ;
            list-style-type: none;
            margin-left: -2px;

            button {
              border :none;
              background-color: white;
              width: 100%;
            }
          }
        }
      }


    }
  }

}