.segment {
  box-sizing: border-box;

  &.clearfix::after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    width: 100%;
  }

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

  &.padding {
    &-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;
      }
    }
  }
}