@import "../settings/variables";

$max-height: 2.75rem;

.c-contrast-button {
  font-family: $font-maersk-text;
  font-size: $font-size-caption;
  font-weight: $font-weight-normal;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  color: #fff;
  background-color: #4DB5AB;
  transition: background-color .2s ease-in-out;
  padding: 0.9285em 1.2857em;
  border: 0.125rem solid #4DB5AB;
  cursor: pointer;
  border-radius: 0.25rem;
  max-height: $max-height;

  &:hover {
    background-color: #6CBDB6;
    border: 2px solid #6CBDB6;
    color: #fff;
  }

  &:focus {
    background-color: #4DB5AB;
    border: 2px solid #B1D9D4;
    color: #fff;
  }

  &:active {
    background-color: #49CABE;
    border: 0.125rem solid #49CABE;
    color: #fff;
  }

  &--floating {
    border-radius: 6.25rem;
  }

  &--circle {
    border-radius: 50%;
    width: $max-height;
    height: $max-height;
    justify-content: center;
  }
}