@layer ds_components {
  .comp-button-mimic,
  .comp-button {
    background-color: var(--ds-component-button-color-background);
    color: var(--ds-component-button-color-content);
    border: none;
    border-radius: var(--ds-component-button-radius);
    outline: var(--ds-component-button-outline-width) solid
      var(--ds-component-button-outline-color);
    padding: var(--ds-component-button-padding-block)
      var(--ds-component-button-padding-inline);
    line-height: var(--ds-component-button-leading);
    text-decoration: none;
    transition: var(--ds-component-button-transition);
    min-height: max(
      var(--ds-component-button-height),
      var(--ds-component-button-icon-height)
    );
    font-size: var(--ds-component-button-font-size);
    width: fit-content;
    min-width: var(--ds-component-button-min-width);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--ds-component-button-gap-icon);

    &:disabled {
      opacity: 0.5;
    }

    &:focus-visible,
    &:hover:not(:disabled) {
      filter: var(--ds-component-button-filter-hover);
      outline-color: var(--ds-component-button-outline-color-focus);
      outline-width: var(--ds-component-button-outline-width-focus);
      background-color: var(--ds-component-button-color-background-hover);
    }

    &.is-resource-of-multiple {
      display: flex;
      align-items: start;
      width: 100%;

      &:hover {
        outline-width: 0;
      }

      svg {
        transform: translateY(0.125em);
      }
    }

    &:has(svg:first-child) {
      padding-inline-start: var(--ds-component-button-padding-inline);
    }

    &:has(svg:last-child) {
      padding-inline-end: var(--ds-component-button-padding-inline);
    }

    &:has(svg ~ [hidden]) {
      padding-inline: var(--ds-component-button-padding-inline);
    }

    svg {
      opacity: 1;
      color: var(--ds-component-button-color-icon);
      fill: currentColor;
      width: var(--ds-component-button-icon-width);
      height: var(--ds-component-button-icon-height);
      flex-shrink: 0;
    }

    strong {
      display: inline-block;
      max-width: 80cqmin;

      small {
        font-weight: var(--ds-semantic-base-font-weight-regular);
        white-space: nowrap;
      }
    }
  }
}