$text-sizes: (
  'base': $global-font-size,
  'large': $lead-font-size,
  'small': $small-font-size
);

.u-text {
  @each $text-size, $text-size-value in $text-sizes {
    @include m(#{$text-size}) {
      font-size: $text-size-value;
    }
  }
}

.u-color--base { color: $ub-txt !important; }

.u-text--capitalized {
  text-transform: capitalize;
}

.u-text--uppercase {
  text-transform: uppercase;
}

.u-text--centered {
  text-align: center;
}

.u-text--right {
  text-align: right;
}

.u-text--strikethrough {
  text-decoration: line-through;
}

.u-text--middled {
  vertical-align: middle;
}

.u-text--bolded {
  font-weight: bold !important;
}

.u-flex { display: flex; }

.u-show { display: block !important; }

.u-hidden { display: none !important; }

.u-float-none { float: none !important;}

$border-radius-aligns: (top-left, bottom-left, top-right, bottom-right);
@each $border-radius-align in $border-radius-aligns {
  .u-br-#{$border-radius-align}--base {
    border-#{$border-radius-align}-radius: $global-radius;
  }
}
$border-radius-sides: (top, bottom);
@each $border-radius-side in $border-radius-sides {
  .u-br-#{$border-radius-side}--base {
    border-#{$border-radius-side}-left-radius: $global-radius;
    border-#{$border-radius-side}-right-radius: $global-radius;
  }
}

.u-br--2xbase {
  border-radius: $global-radius * 2 !important;
}

$margins: (
  'zero': 0,
  'xs': $ub-small-margin * .7,
  'small': $ub-small-margin,
  'base': $ub-base-margin,
  'large': $ub-large-margin,
  'xlarge': $ub-xlarge-margin,
  'xxlarge': $ub-xxlarge-margin,
);
$margins-align: (top, bottom, right, left);

@each $margin-type, $margin-value in $margins {
  @each $align in $margins-align {
    .u-margin-#{$align}--#{$margin-type} {
      margin-#{$align}: $margin-value !important;
    }
  }

  .u-margin-horizontal--#{$margin-type} {
    margin-left: $margin-value;
    margin-right: $margin-value;
  }

  .u-margin-vertical--#{$margin-type} {
    margin-bottom: $margin-value;
    margin-top: $margin-value;
  }
}

$paddings: (
  'zero': 0,
  'tiny': 5px,
  'xs': $ub-small-margin * .7,
  'small': $ub-small-margin,
  'base': $ub-base-margin,
  'large': $ub-large-margin,
  'xlarge': $ub-xlarge-margin,
);
$paddings-align: (top, bottom, left, right);

@each $padding-type, $padding-value in $paddings {
  @each $align in $paddings-align {
    .u-padding-#{$align}--#{$padding-type} {
      padding-#{$align}: $padding-value !important;
    }
  }

  .u-padding-horizontal--#{$padding-type} {
    padding-left: $padding-value;
    padding-right: $padding-value;
  }
}

$align-directions: (top, bottom, left, right);
$align-types: (padding, margin);

@each $align-dir in $align-directions {
  @each $align-type in $align-types {
    .u-#{$align-type}-#{$align-dir}--gutter-half {
      @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir}, $x: .5);
    }

    .u-#{$align-type}-#{$align-dir}--gutter {
      @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir});
    }

    .u-#{$align-type}-#{$align-dir}--gutter2x {
      @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir});
    }
  }
}

$bg: (
  light: $ub-white,
  base: $ub-panel-bg,
  dark: $ub-hero-bg,
  primary: $ub-primary1,
  tooltip: darken($ub-tooltip, 1%),
  ls: map-get($ub-leadership, bg),
);

.u-bg--base-gradient {
  background-image: $ub-gray-gradient;
}

@each $bg-type, $bg-color in $bg {
  .u-bg--#{$bg-type} {
    background-color: $bg-color;
  }
}

.u-wrap {
  @each $bg-type, $bg-color in $bg {
    @include m($bg-type) {
      @extend .u-bg--#{$bg-type};
      padding: $ub-base-padding;
    }
  }
}

.u-pd-content {
  @include add-top-bottom-padding;
}

.u-pd-content--xlarge {
  @include add-top-bottom-padding(2);
}

.u-link--disabled {
  &, a {
    color: $medium-gray;
    cursor: not-allowed;
  }
}

.u-hr-small {
  @include clearfix;
  border-bottom: 2px solid map-get($ub-yellow, base);
  border-radius: 2px;
  border-top: 3px solid map-get($ub-yellow, base);
  margin-bottom: $ub-base-margin;
  width: 52px;
}

.u-hr-small--green {
  border-color: map-get($ub-green, base);
}

.u-hr-small--ls {
  border-color: map-get($ub-leadership, base);
}

.u-centered {
  margin-left: auto;
  margin-right: auto;
}

.u-container {
  @include m(condensed) {
    max-width: 30rem;
  }
}

.u-inline {
  display: inline;
}