@import './globals.scss';

.MenuHeight {
  box-sizing: border-box;
  padding: 5px 10px;

  .parent .hasChildren {
    position: relative;
    user-select: none;
  }
  
  .single-entry {
    box-sizing: border-box;
    border-radius: $border-radius;
    overflow: hidden;

    a {
      text-decoration: none;
    }

    .data {
      margin: 10px 0;
    }

    .text {
      padding: 8px;
    }

    .child {
      display: block;
    }

    .hasChildren:hover {
      cursor: pointer;
    }

    .animation-height-start {
      @keyframes menuHeightAnimateStart {
        0% {
          max-height: 0px;
        }
        100% {
          max-height: auto;
        }
      }
      max-height: 0;
      overflow: hidden;
      animation: menuHeightAnimateStart $default-transition ease-in forwards;
    }

    .animation-height-stop {
      @keyframes menuHeightAnimateStop {
        0% {
          max-height: auto;
        }
        100% {
          max-height: 0px;
        }
      }

      overflow: hidden;
      max-height: auto;
      animation: menuHeightAnimateStop $default-transition ease-in forwards;
    }
  }

  .children-n-1,
  .children-n-2,
  .children-n-3,
  .children-n-4,
  .children-n-5,
  .children-n-6,
  .children-n-7,
  .children-n-8,
  .children-n-9,
  .children-n-10 {
    box-sizing: border-box;
  }

  .children-n-1 {
    .child {
      padding-left: 25px;
    }
  }

  .children-n-2 {
    .child {
      padding-left: 40px;
    }
  }

  .children-n-3 {
    .child {
      padding-left: 55px;
    }
  }

  .children-n-4 {
    .child {
      padding-left: 70px;
    }
  }

  .children-n-5 {
    .child {
      padding-left: 85px;
    }
  }

  .children-n-6 {
    .child {
      padding-left: 100px;
    }
  }

  .children-n-7 {
    .child {
      padding-left: 115px;
    }
  }

  .children-n-8 {
    .child {
      padding-left: 130px;
    }
  }

  .children-n-9 {
    .child {
      padding-left: 145px;
    }
  }

  .children-n-10 {
    .child {
      padding-left: 160px;
    }
  }

  // If dashed option are true
  .dashed {
    padding-left: 10px !important;
    border-left: 1px dashed rgba(122, 122, 122, 0.43);
    margin-left: 10px;
  }
}