// ---------------------------------------------------------------------
//  Utility Classes
// ---------------------------------------------------------------------

.text-left-md {
  @include start-at($medium) {
    text-align: left !important;
  }
}

.has-accent {

  &:after {
    content: "";
    width: 100px;
    height: 2px;
    display: block;
    //background: $brand;
    margin: 20px auto;
  }
}

.has-accent-left {
  display: flex;

  &:before {
    content: "";
    height: 100px;
    width: 3px;
    display: block;
    background: var(--color-scale-gray-5);
    margin: 0 24px 0 0;

    @include start-at($medium) {
      margin-right: 36px;
    }
  }
}

.ml-auto {
  margin-left: auto;
}


// ----------------------------------------
// Text
// ----------------------------------------

.text-center {
  text-align: center;

  p, img, .text-thin {
    margin-left: auto;
    margin-right: auto;
  }
}

.text-thin {
  max-width: 560px;
}

.text-brand {
  color: var(--color-scale-gray-5);
}

.text-white {
  color: $white;

  p {
    color: var(--color-scale-blue-4);
  }
}

.text-light {
  color: var(--color-scale-gray-5);
}

.text-black {
  color: $black;
}

.text-italic {
  font-style: italic;
}

.text-bold {
  font-weight: bold;
}


// ----------------------------------------
// Backgrounds
// ----------------------------------------

.bg-brand {
  background: var(--color-scale-gray-5);
}

.bg-white {
  background-color: $white;
  color: $black;
}

.bg-pattern {
  position: relative;
  z-index: 1;
  overflow: hidden;

  .bg-pattern__img {
    position: absolute;
    width: 100%;
    height: auto;
    max-width: 10000%;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;

    width: 260%;
    left: -80%;

    @include start-at($small) {
      width: 200%;
      left: -50%;
    }

    @include start-at($large) {
      width: 140%;
      left: -20%;
    }

    @include start-at($xlarge) {
      width: 100%;
      left: 0;
    }
  }
}

.bg-pattern-right {
  position: relative;
  z-index: 1;
  //background: $white url('../img/direction/pattern-right.svg') 90% top / auto 100% no-repeat;
  background: $white url('../img/direction/pattern-repeat.svg') right top / 44% auto repeat-y;
}

.bg-pattern-left {
  position: relative;
  z-index: 1;
  background: $white url('../img/direction/pattern-repeat.svg') 0 top / 44% auto repeat-y;
}

.bg-static {
  background: $gray-darkest url('../img/direction/static.jpg') center / cover no-repeat;
}

.bg-black {
  background: $black;
  color: $white;

  .button {
    color: $black !important;

    &:before {
      background: $white;
    }
    &:after {
      opacity: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #1B1F23;
      z-index: -1;
    }
  }
}

.bg-light {
  background: var(--color-scale-gray-1);
}

.hr-dark {
  border-color: $black;
}




.sr-only,
.screen-reader-text {
  @include visually-hidden;
}




$p7s: 60px;
$p7: 80px;

.py-7 {
  padding-top: $p7s;
  padding-bottom: $p7s;
  @include start-at($medium) {
    padding-top: $p7;
    padding-bottom: $p7;
  }
}
.pb-7 {
  padding-bottom: $p7s;
  @include start-at($medium) {
    padding-bottom: $p7;
  }
}
.pt-7 {
  padding-top: $p7s;
  @include start-at($medium) {
    padding-top: $p7;
  }
}
.my-7 {
  margin-top: $p7s;
  margin-bottom: $p7s;
  @include start-at($medium) {
    margin-top: $p7;
    margin-bottom: $p7;
  }
}
.mb-7 {
  margin-bottom: $p7s;
  @include start-at($medium) {
    margin-bottom: $p7;
  }
}
.mt-7 {
  margin-top: $p7s;
  @include start-at($medium) {
    margin-top: $p7;
  }
}

$p8s: 80px;
$p8: 140px;
.py-8 {
  padding-top: $p8s;
  padding-bottom: $p8s;
  @include start-at($medium) {
    padding-top: $p8;
    padding-bottom: $p8;
  }
}
.pb-8 {
  padding-bottom: $p8s;
  @include start-at($medium) {
    padding-bottom: $p8;
  }
}
.pt-8 {
  padding-top: $p8s;
  @include start-at($medium) {
    padding-top: $p8;
  }
}
