$small: "max-width: 768px";
$large: "min-width: 768.01px";

.segment {

  &.children>div>solid-display {
    position: relative;
    display: inline-block;
    white-space: nowrap;
  }

  &.quarter {
    width: 25%;
  }

  &.third {
    width: 33.333%;
  }

  &.half {
    width: 50%;
  }

  &.two-third {
    width: 66.666%;
  }

  &.three-quarter {
    width: 75%;
  }

  &.full {
    width: 100%;
  }

  &.auto {
    width: auto;
  }

  &.children {
    &-hidden>div>solid-display {
      display: none;
    }

    &-quarter>div>solid-display {
      width: 25%;
    }

    &-third>div>solid-display {
      width: 33.333%;
    }

    &-half>div>solid-display {
      width: 50%;
    }

    &-two-third>div>solid-display {
      width: 66.666%;
    }

    &-three-quarter>div>solid-display {
      width: 75%;
    }

    &-full>div>solid-display {
      width: 100%;
    }

    &-auto>div>solid-display {
      width: auto;
    }
  }

  @media($small) {
    &.sm {
      &-hidden {
        display: none;
      }

      &-quarter {
        width: 25%;
      }

      &-third {
        width: 33.333%;
      }

      &-half {
        width: 50%;
      }

      &-two-third {
        width: 66.666%;
      }

      &-three-quarter {
        width: 75%;
      }

      &-full {
        width: 100%;
      }

      &-auto {
        width: auto;
      }
    }

    &.sm-children {
      &-hidden>div>solid-display {
        display: none;
      }

      &-quarter>div>solid-display {
        width: 25%;
      }

      &-third>div>solid-display {
        width: 33.333%;
      }

      &-half>div>solid-display {
        width: 50%;
      }

      &-two-third>div>solid-display {
        width: 66.666%;
      }

      &-three-quarter>div>solid-display {
        width: 75%;
      }

      &-full>div>solid-display {
        width: 100%;
      }

      &-auto>div>solid-display {
        width: auto;
      }
    }
  }

  @media($large) {
    &.lg {
      &-hidden {
        display: none;
      }
    }

    &.lg-children {
      &-hidden>div>solid-display {
        display: none;
      }
    }
  }
}