.is {
  &-block {
    display: block !important;
  }

  &-flex {
    display: flex !important;
  }

  &-inline {
    display: inline !important;
  }

  &-inline-block {
    display: inline-block !important;
  }

  &-inline-flex {
    display: inline-flex !important;
  }

  &-hidden {
    display: none !important;
  }

  &-invisible {
    visibility: hidden !important;
  }

}

.has-no {
  &-padding {
    padding: 0 !important;

    &-top {
      padding-top: 0 !important;
    }

    &-bottom {
      padding-bottom: 0 !important;
    }

    &-left {
      padding-left: 0 !important;
    }

    &-right {
      padding-right: 0 !important;
    }
  }

  &-margin {
    margin: 0 !important;
  }

  &-border {
    border: none !important;
  }

  &-shadow {
    box-shadow: none !important;
  }

  &-wrap {
    white-space: nowrap;
  }

  &-transition {
    transition: none !important;
  }
}

.has-text {
  &-left {
    text-align: left !important;
  }

  &-right {
    text-align: right !important;
  }

  &-center {
    text-align: center !important;
  }
}

.has-font {
  &-normal {
    font-weight: normal !important;
  }

  &-bold {
    font-weight: bold !important;
  }
}

.is-margin-center {
  margin: 0 auto !important;
}

.is-float {
  &-left {
    float: left;
  }

  &-right {
    float: right;
  }
}

.is-vertically-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.has {
  &-start {
    justify-content: flex-start !important;
  }

  &-centered {
    justify-content: center !important;
  }

  &-end {
    justify-content: flex-end !important;
  }
}

@include medium {
  .is-mobile-only {
    display: none !important;
  }
}

@include small {
  .is-tablet-up, .is-tablet-only {
    display: none !important;
  }
}

@include large {
  .is-tablet-down, .is-tablet-only {
    display: none !important;
  }
}

@include extra-large {
  .is-desktop-down, .is-desktop-only {
    display: none !important;
  }
}

@media (max-width: calc(#{$large} - 1px)) {
  .is-desktop-up, .is-desktop-only {
    display: none !important;
  }
}

@media (max-width: calc(#{$x-large - 1px})) {
  .is-desktop-x-only {
    display: none !important;
  }
}