.theme--dcc_reference {
  :is(a, button, input):is(
    .button,
    .button--primary,
    .button--secondary,
    .button--tertiary,
    .button--quaternary
  ) {
    align-items: center;
    background: var(--dcc-button-background);
    border: var(--dcc-button-border);
    box-sizing: var(--dcc-button-box-sizing);
    color: var(--dcc-button-color);
    display: inline-flex;
    font-size: var(--dcc-button-font-size);
    height: var(--dcc-button-height);
    line-height: var(--dcc-button-line-height);
    max-width: var(--dcc-layout-grid-column-width);
    min-height: unset;
    min-width: unset;
    width: auto;

    &:is(a) {
      cursor: pointer;
    }

    &:hover,
    &:focus {
      .button__arrow {
        transform: translateX(var(--dcc-button-arrow-translatex));
        transition: var(--dcc-transition-in);
      }
    }

    &:hover {
      background: var(--dcc-button-background);
      border: var(--dcc-button-border);
      color: var(--dcc-button-color);
      text-decoration: underline;
      text-decoration-thickness: var(--dcc-link-text-decoration-thickness);
      text-underline-offset: var(--dcc-link-text-underline-offset);
    }

    /* Parent theme makes no distinction between .button & .button--primary. */
    /* .button--primary {} */

    /* Secondary */
    &:is(.button--secondary) {
      background: var(--dcc-button-secondary-background);
      color: var(--dcc-button-secondary-color);

      &:hover,
      &:focus {
        background: var(--dcc-button-secondary-background);
        color: var(--dcc-button-secondary-color);
      }
    }

    /* Tertiary */
    &:is(.button--tertiary) {
      background: var(--dcc-button-tertiary-background);
      color: var(--dcc-button-tertiary-color);

      &:hover,
      &:focus {
        background: var(--dcc-button-tertiary-background);
        color: var(--dcc-button-tertiary-color);
      }
    }

    &:is(.button--quaternary) {
      background: var(--dcc-button-quaternary-background);
      color: var(--dcc-button-quaternary-color);

      &:hover,
      &:focus {
        background: var(--dcc-button-quaternary-background);
        color: var(--dcc-button-quaternary-color);
      }
    }
  }

  /* External */
  .button--external .button__arrow svg {
    transform: rotate(-45deg);
  }

  /* Icon */
  .button--icon-divider {
    justify-content: start;
  }

  .button__icon,
  .button__arrow {
    box-sizing: content-box;
    display: grid;
    height: 100%;
    place-items: center;
    transition: var(--dcc-transition-out);

    svg path {
      display: block;
      fill: currentColor;
    }
  }

  .button__icon {
    height: var(--dcc-button-icon-size);
    width: var(--dcc-button-icon-size);

    svg {
      height: var(--dcc-button-icon-svg-size);
      width: var(--dcc-button-icon-svg-size);
    }
  }

  .button__arrow {
    height: var(--dcc-button-icon-size);
    width: var(--dcc-button-arrow-size);

    svg {
      height: var(--dcc-button-arrow-svg-size);
      width: var(--dcc-button-arrow-svg-size);
    }
  }

  .button__content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .button.button--icon:not(.button--icon-divider) & {
      margin-inline-start: var(--dcc-button-icon-margin-inline-start);
    }

    .button--icon-divider & {
      border-inline-start: 1px solid currentColor;
      margin-inline-start: var(--dcc-button-icon-divider-margin-inline-start);
      padding-inline-start: var(--dcc-button-icon-divider-padding-inline-start);
    }

    .button.button--arrow:not(.button--arrow-divider) & {
      margin-inline-end: var(--dcc-button-arrow-margin-inline-end);
    }

    .button--arrow-divider & {
      border-inline-end: 1px solid currentColor;
      margin-inline-end: var(--dcc-button-arrow-divider-margin-inline-end);
      padding-inline-end: var(--dcc-button-arrow-divider-padding-inline-end);
    }
  }

  :is(
    .button,
    .button--primary,
    .button--secondary,
    .button--tertiary,
    .button--quaternary
  ):is(.button--icon-only) {
    /* This is a flex element with text overflow. Padding isn't needed for
    positioning content, and sometimes cuts off the text-decoration. */
    padding-block: 0;
    padding-inline: var(--dcc-button-padding-block);
    width: var(--dcc-button-height);

    & .button__icon {
      position: relative;
    }

    /* Duplicate the text-decoration from regular buttons. */
    &:hover .button__icon::after {
      background: currentColor;
      bottom: calc(var(--dcc-button-padding-block) / -2);
      content: "";
      height: var(--dcc-link-text-decoration-thickness);
      position: absolute;
      width: 100%;
    }
  }

  /* input[type="submit"] is slightly repetetive, but what can we do 🤷? */
  input[type="submit"]:is(
    .button,
    .button--primary,
    .button--secondary,
    .button--tertiary,
    .button--quaternary
  ):is(.button--icon-only) {
    cursor: auto;
    height: 0;
    min-width: 0;
    overflow: hidden;
    padding-block: var(--dcc-button-height) 0;
    padding-inline: 0;

    &.button--icon-search-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M13.23.03C5.956.03.03 5.955.03 13.23c0 7.275 5.926 13.2 13.2 13.2 3.16 0 6.061-1.12 8.336-2.98l8.514 8.51 1.88-1.88-8.51-8.514a13.13 13.13 0 0 0 2.98-8.336c0-7.274-5.925-13.2-13.2-13.2zm0 2.66a10.52 10.52 0 0 1 10.54 10.54c0 5.837-4.703 10.54-10.54 10.54A10.52 10.52 0 0 1 2.69 13.23 10.522 10.522 0 0 1 13.23 2.69z'/%3E%3C/svg%3E");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: var(--dcc-button-icon-svg-size);

      &:is(.button--secondary) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M13.23.03C5.956.03.03 5.955.03 13.23c0 7.275 5.926 13.2 13.2 13.2 3.16 0 6.061-1.12 8.336-2.98l8.514 8.51 1.88-1.88-8.51-8.514a13.13 13.13 0 0 0 2.98-8.336c0-7.274-5.925-13.2-13.2-13.2zm0 2.66a10.52 10.52 0 0 1 10.54 10.54c0 5.837-4.703 10.54-10.54 10.54A10.52 10.52 0 0 1 2.69 13.23 10.522 10.522 0 0 1 13.23 2.69z'/%3E%3C/svg%3E");
      }
    }


    /* Duplicate the text-decoration from regular buttons. */
    :has(> &) {
      position: relative;
      width: var(--dcc-button-height);
    }

    :has(> &:hover)::after {
      background: currentColor;
      bottom: calc(var(--dcc-button-padding-block) - 2px);
      content: "";
      height: var(--dcc-link-text-decoration-thickness);
      left: calc(50% - var(--dcc-button-icon-size) / 2);
      position: absolute;
      width: var(--dcc-button-icon-size);
    }

    :has(> &:is(.button, .button--primary))::after {
      color: var(--dcc-button-color);
    }

    :has(> &:is(.button--secondary))::after {
      color: var(--dcc-button-secondary-color);
    }

    :has(> &:is(.button--tertiary))::after {
      color: var(--dcc-button-tertiary-color);
    }

    :has(> &:is(.button--quaternary))::after {
      color: var(--dcc-button-quaternary-color);
    }
  }
}

@media screen and (min-width: 64rem) {
  .theme--dcc_reference {
    :is(a, button, input):is(
      .button,
      .button--primary,
      .button--secondary,
      .button--tertiary,
      .button--quaternary
    ) {
      height: var(--dcc-button-height-large);

      &:is(.button--icon-only) {
        width: var(--dcc-button-height-large);
      }
    }

    input[type="submit"]:is(
      .button,
      .button--primary,
      .button--secondary,
      .button--tertiary,
      .button--quaternary
    ) {
      &:is(.button--icon-only) {
        padding-block: var(--dcc-button-height-large) 0;
      }
    }

    /* input[type="submit"] hover styles */
    input[type="submit"]:is(
      .button,
      .button--primary,
      .button--secondary,
      .button--tertiary,
      .button--quaternary
    ):is(.button--icon-only) {
      /* :has(> &) targets the parent element. */
      :has(> &) {
        width: var(--dcc-button-height-large);
      }

      :has(> &:hover)::after {
        bottom: calc(var(--dcc-button-padding-block) - 2px);
        left: calc(50% - var(--dcc-button-icon-size) / 2);
        width: var(--dcc-button-icon-size);
        left: calc((var(--dcc-button-height-large) - var(--dcc-button-icon-size)) / 2);
      }
    }
  }
}