$border-radius--chevrons: 30px;

.uc-chevrons {
  @include border-radius($border-radius--chevrons);
  border: $light-border-width solid $lighter-gray;
  display: table;
  height: 46px;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;

  > li + li {
    border-left: 1px solid $lighter-gray;
  }
}

.uc-chevrons__item {
  @include font-size-px-to-rem($small, true);
  color: $middle-gray;
  display: table-cell;
  font-weight: $semibold-weight;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;

  // IE fix
  // overflow hidden on uc-chevrons does not work in IE
  &:first-child {
    @include border-left-radius($border-radius--chevrons);
  }
  &:last-child {
    @include border-right-radius($border-radius--chevrons);
  }
  @media #{$small-tablet} {
    @include border-radius($border-radius--chevrons);
    @include font-size-px-to-rem($font-size, true);
  }
}

.uc-chevrons__item--past {
  background-color: $lighter-gray2;
  @media #{$small-tablet} {
    display: none;
  }
}

.uc-chevrons__item--present {
  background-color: $sky-blue;
  color: $dark-gray;
  font-weight: $semibold-weight;
}

.uc-chevrons__item--future {
  @media #{$small-tablet} {
    display: none;
  }
}

.uc-chevrons__item__content {
  position: relative;
  padding: $gutter/2 $gutter;

  &:after {
    @include icon-inline-block;
    margin-top: -7px; // half the font-size of the content to center the icon
    padding-right: $gutter/2;
    position: absolute;
    top: 50%;
    right: 0;
    @media #{$small-tablet} {
      padding-right: $gutter*3;
    }
  }
}

.uc-chevrons__item--past .uc-chevrons__item__content {
  padding-right: $gutter*2;

  &:after {
    content: $uc-icon-check;
  }
}

.uc-chevrons__item:not(:last-child).uc-chevrons__item--present .uc-chevrons__item__content {
  padding-right: $gutter*2;

  &:after {
    content: $uc-icon-arrow-right;
  }
}

.uc-chevrons-placeholder {
  display: none;

  @media #{$small-tablet} {
    display: inline-block;
  }
}