@mixin menu-fullscreen-phone(
  $toggle-size:100px,
  $padding:20px,
  $bg-color:#cccccc,
  $bg-color-hover:#999999,
  $font-color:#666666,
  $font-color-hover:#ffffff
) {

  @include absolute-span();

  padding-top: $toggle-size;
  list-style: none;
  display: block;
  table-layout: fixed;
  width: 100%;
  overflow: scroll;
  background-color: $bg-color;

  // First
  li {
    position: relative;
    display: block;
    background-color: $bg-color;
    color: $font-color;
    width: 100%;
    text-transform: uppercase;
    //border-left: solid $padding $font-color;

    a {
      display: block;
      padding: $padding;
      width: 100%;
      text-decoration: none;
      color: $font-color;
      box-sizing: border-box;
    }

    // Second
    ul {
      display: block;
      position: relative;
      width: 100%;

      // Second
      li {
        color: $font-color;
        text-transform: none;
        a {
          padding-left: 2*$padding;
          color: $font-color;
        }

        // Third
        ul {
          position: relative;
          display: block;
          left: auto;
          top: auto;

          // Third
          li {
            position: relative;
            color: $font-color;
            font-weight: 300;

            a {
              padding-left: 3*$padding;
              color: $font-color;
            }
          }
        }
      }
    }

    // First
    &:hover {
      background-color: $bg-color-hover;
      color: $font-color-hover;
      //border-left: solid $padding $font-color-hover;

      a {
        color: $font-color-hover;
      }

      // Second
      ul {
        display: block;

        // Second
        li {
          display: block;
          color: $font-color;

          a {
            color: $font-color;
          }
          // Third
          ul {
            display: block;

            // Third
            li {

            }
          }

          // Second
          &:hover {
            color: $font-color-hover;

            a {
              color: $font-color-hover;
            }

            // Third
            ul {
              display: block;

              // Third
              li {
                color: $font-color;

                a {
                  color: $font-color;
                }

                &:hover {
                  color: $font-color-hover;

                  a {
                    color: $font-color-hover;
                  }
                }
              }
            }
          }
        }
      }
    }
    &:last-of-type {
      ul li ul {
        right: auto;
        left: auto;
      }
    }
  }
}