CMSgov/dpc-app

.ds-c-button {
  box-sizing: border-box;
  font-family: $font-sans;
}

.ds-c-button--big {
  width: 100%;

  @media (min-width: $width-sm) {
    width: auto;
  }
}

.ds-c-button--big + .ds-c-button--big {
  margin: $spacer-2 0 0;

  @media (min-width: $width-md) {
    margin: 0 0 0 $spacer-2;
  }
}

.ds-c-button--inverse--alt {
  border-color: $color-primary-alt-lightest;
  color: $color-primary-alt-lightest;

  &:hover,
  &:focus {
    border-color: $color-white;
    color: $color-white;
  }
}


.list-control-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  align-items: center;
  background: none;
  border: 0;
  color: $color-base;
  cursor: pointer;
  display: flex;
  padding: 0;

  &:hover {
    text-decoration: underline;
  }
}


.utility-button,
.utility-button:visited {
  align-items: center;
  background: $color-gray-lightest;
  border: 1px solid $color-gray-light;
  border-radius: 3px;
  color: $color-gray-dark;
  display: inline-flex;
  font-size: $h6-font-size;
  font-weight: $font-bold;
  margin: 0 0 $spacer-2 0;
  padding: $spacer-1;
  text-decoration: none;

  &:hover,
  &:focus {
    border-color: $color-gray-dark;
    color: $color-gray-dark;
  }

  svg {
    margin-right: $spacer-1;
    max-width: 1.2em;
    max-height: 1.2em;
    display: inline;
    fill: currentColor;
  }
}

.button__container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}