.close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.close-button:hover,
.close-button:active,
.close-button:focus {
  background: none;

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
}

.close-button:focus {
  box-shadow: 0 0 0 3px var(--agnostic-focus-ring-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.close {
  width: var(--fluid-12);
  height: var(--fluid-12);
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  flex-shrink: 0;
  color: currentColor;
}

.close-button .close {
  opacity: 80%;
  transition: opacity var(--agnostic-timing-medium);
}

@media (prefers-reduced-motion), (update: slow) {
  .close-button:focus,
  .close-button .close {
    transition-duration: 0.001ms !important;
  }
}

.close-button-small {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.close-button-large {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.close-button-xlarge {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.close-button-small > .close {
  width: 0.5625rem;
  height: 0.5625rem;
}

.close-button-large > .close {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.close-button-xlarge > .close {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.close-button:hover .close {
  opacity: 100%;
}