.brand {
  display: block;
  width: $brandWidth;
  height: $brandHeight;

  svg,
  img {
    display: block;
    width: $brandWidth;
    height: $brandHeight;
  }

  .knockout & {
    @media screen {
      .fill-primary {
        fill: $white;
      }

      .fill-grey {
        fill: rgba($white, 0.8);
      }
    }
  }
}

.container {
  width: 90%;
  margin: auto;

  &-large { max-width: $containerLarge; }
  &-medium { max-width: $containerMedium; }
  &-small { max-width: $containerSmall; }
  &-narrow { max-width: $containerNarrow; }
}

.section {
  padding: $sectionMedium 0;

  &-small { padding: $sectionSmall 0; }
  &-medium { padding: $sectionMedium 0; }
  &-large { padding: $sectionLarge 0; }

  &-zero-top { padding-top: 0; }
  &-zero-bottom { padding-bottom: 0; }
}

.inner {
  padding: $innerMedium;

  &-small { padding: $innerSmall; }
  &-large { padding: $innerLarge; }

  &-zero-x {
    padding-left: 0;
    padding-right: 0;
  }

  &-zero-y {
    padding-top: 0;
    padding-top: 0;
  }
}

.rounded {
  border-radius: $borderRadius;

  &-top {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  &-bottom {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
}

.border {
  border-style: solid;
  border-width: $borderWidth;

  &-thin { border-width: 0.0625em; }
  &-regular { border-width: $borderWidth; }
  &-thick { border-width: $borderThick; }
  &-thicker { border-width: $borderThicker; }

  &-top {
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
  }

  &-right {
    border-top-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
  }

  &-bottom {
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
  }

  &-left {
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
  }
}
