.padding {
  &-none {
    padding: 0;
  }
  &-xxsmall {
    padding: 5px;
  }
  &-xsmall {
    padding: 10px;
  }
  &-small {
    padding: 15px;
  }
  &-medium {
    padding: 20px;
  }
  &-large {
    padding: 25px;
  }
  &-xlarge {
    padding: 30px;
  }
  &-xxlarge {
    padding: 35px;
  }
  &-top {
    &-xxsmall {
      padding-top: 5px;
    }
    &-xsmall {
      padding-top: 10px;
    }
    &-small {
      padding-top: 15px;
    }
    &-medium {
      padding-top: 20px;
    }
    &-large {
      padding-top: 25px;
    }
    &-xlarge {
      padding-top: 30px;
    }
    &-xxlarge {
      padding-top: 35px;
    }
  }

  &-right {
    &-xxsmall {
      padding-right: 5px;
    }
    &-xsmall {
      padding-right: 10px;
    }
    &-small {
      padding-right: 15px;
    }
    &-medium {
      padding-right: 20px;
    }
    &-large {
      padding-right: 25px;
    }
    &-xlarge {
      padding-right: 30px;
    }
    &-xxlarge {
      padding-right: 35px;
    }
  }
  &-bottom {
    &-xxsmall {
      padding-bottom: 5px;
    }
    &-xsmall {
      padding-bottom: 10px;
    }
    &-small {
      padding-bottom: 15px;
    }
    &-medium {
      padding-bottom: 20px;
    }
    &-large {
      padding-bottom: 25px;
    }
    &-xlarge {
      padding-bottom: 30px;
    }
    &-xxlarge {
      padding-bottom: 35px;
    }
  }
  &-left {
    &-xxsmall {
      padding-left: 5px;
    }
    &-xsmall {
      padding-left: 10px;
    }
    &-small {
      padding-left: 15px;
    }
    &-medium {
      padding-left: 20px;
    }
    &-large {
      padding-left: 25px;
    }
    &-xlarge {
      padding-left: 30px;
    }
    &-xxlarge {
      padding-left: 35px;
    }
  }
}

@media (max-width: 768px) {

  .sm-padding {
    &-none {
      padding: 0;
    }

    &-xxsmall {
      padding: 5px;
    }

    &-xsmall {
      padding: 10px;
    }

    &-small {
      padding: 15px;
    }

    &-medium {
      padding: 20px;
    }

    &-large {
      padding: 25px;
    }

    &-xlarge {
      padding: 30px;
    }

    &-xxlarge {
      padding: 35px;
    }

    &-top {
      &-xxsmall {
        padding-top: 5px;
      }

      &-xsmall {
        padding-top: 10px;
      }

      &-small {
        padding-top: 15px;
      }

      &-medium {
        padding-top: 20px;
      }

      &-large {
        padding-top: 25px;
      }

      &-xlarge {
        padding-top: 30px;
      }

      &-xxlarge {
        padding-top: 35px;
      }
    }

    &-right {
      &-xxsmall {
        padding-right: 5px;
      }

      &-xsmall {
        padding-right: 10px;
      }

      &-small {
        padding-right: 15px;
      }

      &-medium {
        padding-right: 20px;
      }

      &-large {
        padding-right: 25px;
      }

      &-xlarge {
        padding-right: 30px;
      }

      &-xxlarge {
        padding-right: 35px;
      }
    }

    &-bottom {
      &-xxsmall {
        padding-bottom: 5px;
      }

      &-xsmall {
        padding-bottom: 10px;
      }

      &-small {
        padding-bottom: 15px;
      }

      &-medium {
        padding-bottom: 20px;
      }

      &-large {
        padding-bottom: 25px;
      }

      &-xlarge {
        padding-bottom: 30px;
      }

      &-xxlarge {
        padding-bottom: 35px;
      }
    }

    &-left {
      &-xxsmall {
        padding-left: 5px;
      }

      &-xsmall {
        padding-left: 10px;
      }

      &-small {
        padding-left: 15px;
      }

      &-medium {
        padding-left: 20px;
      }

      &-large {
        padding-left: 25px;
      }

      &-xlarge {
        padding-left: 30px;
      }

      &-xxlarge {
        padding-left: 35px;
      }
    }
  }
}

.children-padding {
  &-none>div>solid-display {
    padding: 0;
  }
  &-xxsmall>div>solid-display {
    padding: 5px;
  }
  &-xsmall>div>solid-display {
    padding: 10px;
  }
  &-small>div>solid-display {
    padding: 15px;
  }
  &-medium>div>solid-display {
    padding: 20px;
  }
  &-large>div>solid-display {
    padding: 25px;
  }
  &-xlarge>div>solid-display {
    padding: 30px;
  }
  &-xxlarge>div>solid-display {
    padding: 35px;
  }
  &-top {
    &-xxsmall>div>solid-display {
      padding-top: 5px;
    }
    &-xsmall>div>solid-display {
      padding-top: 10px;
    }
    &-small>div>solid-display {
      padding-top: 15px;
    }
    &-medium>div>solid-display {
      padding-top: 20px;
    }
    &-large>div>solid-display {
      padding-top: 25px;
    }
    &-xlarge>div>solid-display {
      padding-top: 30px;
    }
    &-xxlarge>div>solid-display {
      padding-top: 35px;
    }
  }
  &-right {
    &-xxsmall>div>solid-display {
      padding-right: 5px;
    }
    &-xsmall>div>solid-display {
      padding-right: 10px;
    }
    &-small>div>solid-display {
      padding-right: 15px;
    }
    &-medium>div>solid-display {
      padding-right: 20px;
    }
    &-large>div>solid-display {
      padding-right: 25px;
    }
    &-xlarge>div>solid-display {
      padding-right: 30px;
    }
    &-xxlarge>div>solid-display {
      padding-right: 35px;
    }
  }
  &-bottom {
    &-xxsmall>div>solid-display {
      padding-bottom: 5px;
    }
    &-xsmall>div>solid-display {
      padding-bottom: 10px;
    }
    &-small>div>solid-display {
      padding-bottom: 15px;
    }
    &-medium>div>solid-display {
      padding-bottom: 20px;
    }
    &-large>div>solid-display {
      padding-bottom: 25px;
    }
    &-xlarge>div>solid-display {
      padding-bottom: 30px;
    }
    &-xxlarge>div>solid-display {
      padding-bottom: 35px;
    }
  }
  &-left {
    &-xxsmall>div>solid-display {
      padding-left: 5px;
    }
    &-xsmall>div>solid-display {
      padding-left: 10px;
    }
    &-small>div>solid-display {
      padding-left: 15px;
    }
    &-medium>div>solid-display {
      padding-left: 20px;
    }
    &-large>div>solid-display {
      padding-left: 25px;
    }
    &-xlarge>div>solid-display {
      padding-left: 30px;
    }
    &-xxlarge>div>solid-display {
      padding-left: 35px;
    }
  }
}

@media (max-width: 768px) {
  .sm-children-padding {
    &-none>div>solid-display {
      padding: 0;
    }
    &-xxsmall>div>solid-display {
      padding: 5px;
    }

    &-xsmall>div>solid-display {
      padding: 10px;
    }

    &-small>div>solid-display {
      padding: 15px;
    }

    &-medium>div>solid-display {
      padding: 20px;
    }

    &-large>div>solid-display {
      padding: 25px;
    }

    &-xlarge>div>solid-display {
      padding: 30px;
    }

    &-xxlarge>div>solid-display {
      padding: 35px;
    }

    &-top {
      &-xxsmall>div>solid-display {
        padding-top: 5px;
      }

      &-xsmall>div>solid-display {
        padding-top: 10px;
      }

      &-small>div>solid-display {
        padding-top: 15px;
      }

      &-medium>div>solid-display {
        padding-top: 20px;
      }

      &-large>div>solid-display {
        padding-top: 25px;
      }

      &-xlarge>div>solid-display {
        padding-top: 30px;
      }

      &-xxlarge>div>solid-display {
        padding-top: 35px;
      }
    }

    &-right {
      &-xxsmall>div>solid-display {
        padding-right: 5px;
      }

      &-xsmall>div>solid-display {
        padding-right: 10px;
      }

      &-small>div>solid-display {
        padding-right: 15px;
      }

      &-medium>div>solid-display {
        padding-right: 20px;
      }

      &-large>div>solid-display {
        padding-right: 25px;
      }

      &-xlarge>div>solid-display {
        padding-right: 30px;
      }

      &-xxlarge>div>solid-display {
        padding-right: 35px;
      }
    }

    &-bottom {
      &-xxsmall>div>solid-display {
        padding-bottom: 5px;
      }

      &-xsmall>div>solid-display {
        padding-bottom: 10px;
      }

      &-small>div>solid-display {
        padding-bottom: 15px;
      }

      &-medium>div>solid-display {
        padding-bottom: 20px;
      }

      &-large>div>solid-display {
        padding-bottom: 25px;
      }

      &-xlarge>div>solid-display {
        padding-bottom: 30px;
      }

      &-xxlarge>div>solid-display {
        padding-bottom: 35px;
      }
    }

    &-left {
      &-xxsmall>div>solid-display {
        padding-left: 5px;
      }

      &-xsmall>div>solid-display {
        padding-left: 10px;
      }

      &-small>div>solid-display {
        padding-left: 15px;
      }

      &-medium>div>solid-display {
        padding-left: 20px;
      }

      &-large>div>solid-display {
        padding-left: 25px;
      }

      &-xlarge>div>solid-display {
        padding-left: 30px;
      }

      &-xxlarge>div>solid-display {
        padding-left: 35px;
      }
    }
  }
}