button.css

.button {
  /* Reset <a /> */
  text-decoration: none;

  /* Reset <button /> */
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;

  /* For icons */
  display: inline-grid;
  grid-auto-flow: column;
  grid-column-gap: calc(12 * var(--font-size-basis));
  align-items: center;

  border-width: 1px;
  border-style: solid;
  background-color: var(--color-white);
  color: var(--color-benthos-blue);
  border-color: var(--color-ultramarine-blue);
  text-align: center;

  /* .button--large */
  /* .body-1 */
  font-size: var(--font-size-18);
  line-height: var(--line-height-1);
  font-weight: var(--font-weight-bold);

  padding: calc(16 * var(--font-size-basis)) calc(40 * var(--font-size-basis));
  --button-height: calc(56 * var(--font-size-basis));

  border-radius: calc(var(--button-height) / 2);

  transition-property: color, background-color, border-color;
  transition-duration: var(--transition-duration), var(--transition-duration), var(--transition-duration);
}

/* SHIM: Reset <summary /> elements */
.button::-webkit-details-marker {
  display: none;
}

.button:hover,
.button:active,
.button:focus {
  background-color: var(--color-benthos-blue);
  border-color: transparent;
  color: var(--color-white);
}



.button--round {
  border-radius: 50%;

  border-color: var(--color-littoral-blue);
  color: var(--color-ultramarine-blue);
  
  /* .button--round.button--large */
  padding: calc(12 * var(--font-size-basis));
}

.button--round.button--large {
  /* Default */
}

.button--round.button--small {
  padding: calc(7 * var(--font-size-basis));
}


.button--round:hover,
.button--round:active,
.button--round:focus {
  background-color: var(--color-sea-salt-gray);
  color: var(--color-ultramarine-blue);
}


.button__label {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: center;
}

.button__icon {
  grid-row: 1 / -1;
  grid-column: -3 / -1;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-littoral-blue);
  color: var(--color-benthos-blue);
  border-width: 0 0 0 1px;
  border-style: solid;
  color: var(--color-benthos-blue);
  border-color: var(--color-ultramarine-blue);

  transition-property: color, background-color, border-color;
  transition-duration: var(--transition-duration), var(--transition-duration), var(--transition-duration);
}

:hover > .button__icon,
:active > .button__icon,
:focus > .button__icon {
  background-color: inherit;
  color: inherit;
}

.button--primary {
  background-color: var(--color-benthos-blue);
  border-color: transparent;
  color: var(--color-white);
}

.button--tertiary {
  background-color: var(--color-ultramarine-blue);
  border-color: transparent;
  color: var(--color-white);
}

.button--tertiary:hover,
.button--tertiary:active,
.button--tertiary:focus {
  background-color: var(--color-benthos-blue);
  border-color: transparent;
  color: var(--color-white);
}

.button--primary:hover,
.button--primary:active,
.button--primary:focus {
  background-color: var(--color-ultramarine-blue);
  border-color: transparent;
  color: var(--color-white);
}

.button--large {
  /* Default */
}

.button--medium {
  /* .body-3 */
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);

  padding: calc(14 * var(--font-size-basis)) calc(23 * var(--font-size-basis));
  --button-height: calc(48 * var(--font-size-basis));
  /* padding: calc((14/16) * 1em) calc((23/16) * 1em);
  --button-height:calc((48/16) * 1em); */
}

.button--small {
  /* .body-5 */
  font-size: var(--font-size-14);
  line-height: var(--line-height-base-17);
  font-weight: var(--font-weight-bold);

  padding: calc(8 * var(--font-size-basis)) calc(14 * var(--font-size-basis));
  --button-height: calc(35 * var(--font-size-basis));
  /* padding: calc((8/14) * 1em) 1em;
  --button-height:calc((35/14) * 1em); */
}




.button--compound {
  padding: 0;
  grid-template-columns: 0.25em auto 0 1.375em;
  grid-column-gap: 1.375em;
  grid-template-rows: 0.75em auto 0.75em;
  overflow: hidden;
}





.filter-list-button--active {
  background-color: var(--color-littoral-blue);
  color: var(--color-ultramarine-blue);
}