.site-showcase {
  @include clearfix;
  background-color: #ffffff;
  border: 1px solid $color-gray-lighter;
  margin: 1.5em 0 $units-1;
  padding: $units-2;
}

.site-showcase + .highlighter-rouge {
  margin-top: -1px;
}

.site-showcase__header {
  margin-bottom: units(4);

  @include media($medium-screen) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
}

.site-showcase__browser-icon {
  height: 40px;
  width: 40px;

  &.firefox {
    fill: var(--vads-color-orange);
  }

  &.chrome {
    fill: var(--vads-color-warning);
  }

  &.edge {
    fill: var(--vads-color-blue-cool-light);
  }

  &.safari {
    fill: var(--vads-color-primary-alt-dark);
  }
  
}

.site-showcase__heading {
  font-size: 1.25rem;
  font-family: var(--font-family-sans);
  margin-top: 0;

  @include media($medium-screen) {
    margin: 0;
  }
}

.site-utility-scope {
  display: flex;
  list-style: none;
  padding: 0;

  @include media($medium-screen) {
      margin: 0;
  }
}

.site-utility-scope__link {
  margin: 0;
}

.site-utility-scope__button,
.site-utility-scope__button:visited,
.site-utility-scope__button:hover {
  background: transparent;
  color: var(--vads-color-base);
  font-weight: $font-bold;
  display: inline-block;
  text-decoration: none;
  border: 1px solid;
  padding: units(1);
  border-radius: 4px;
  transition: none;

  va-icon {
    margin-right: units(.5);
    vertical-align: middle;
  }
}

.site-utility-scope__button--supported,
.site-utility-scope__button--supported:visited {
  border-color: var(--vads-color-green-lighter);
}

.site-utility-scope__button--unsupported,
.site-utility-scope__button--unsupported:visited {
  border-color: $color-gray-lighter;
  color: $color-gray-light;
  text-decoration: line-through;
  pointer-events: none;
}

.site-showcase__prop-head {
  width: 100%;
  margin: 0;
}

.site-showcase__prop {
  font-family: $font-mono;
  color: $color-secondary-darkest;
}

.site-showcase__col {
  border-top: 1px solid $color-gray-lighter;
  padding: $units-3 0;
}

.site-square-outer {
  background: var(--vads-color-secondary-light);
  display: flex;
}

.site-square {
  background: #fff;
  border: 1px solid var(--vads-color-base);
  display: inline-block;
  flex-shrink: 0;
}

.site-square--small {
  width: 20px;
  height: 20px;
}

.site-utility-class {
  font-family: "Courier";
  font-size: 12px;
  display: block;
  width: auto;
  background: $color-gray-lightest;
  padding: 4px;
  border-radius: 2px;
}

.site-utility-value {
  font-family: "Courier";
  font-size: 12px;
  display: inline-block;
  width: auto;
  background: var(--vads-color-secondary-lightest);
  padding: 4px;
  border-radius: 2px;
}

.site-u-height--2square{
  height: 20px;
  width: 20px;
}

.opacity-25 {
  opacity: .25;
}

.vads-u-margin-top--yikes {
  margin-top: 124px;
}

.vads-u-margin-left--yikes {
  margin-left: 124px;
}

.width-100 {
  width: 100%;
}

.site-showcase__padding-example__outer {
  border: 1px solid var(--vads-color-base);
  background: var(--vads-color-primary-alt-light);
  display: inline-block;
  width: 160px;
  height: 160px;
}

.site-showcase__padding-example__inner {
  background: white;
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}





.utility-value-color {
  background-color: #fff;
  border: 1px solid $color-gray-lightest;
  font-family: $font-mono;
  margin-top: 0;
  font-weight: 300;
  white-space: nowrap;
  text-transform: lowercase;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  display: flex;
  align-items: center;
}

.utility-value-color__chip {
  height: 0.46875rem;
  border-radius: 50%;
  width: 0.46875rem;
  display: inline-block;
  margin-right: 8px;
}

.site-aspect-ratio {
   background-color: var(--vads-color-primary-alt-light);
   position: relative;
   width: 100%;
}

.site-aspect-ratio--11 {
  padding-top: 100%;
}

.site-aspect-ratio--21 {
  padding-top: 50%;
}

.site-aspect-ratio--32 {
  padding-top: 66.66666%
}

.site-aspect-ratio--72 {
  padding-top: 28.5714%
}