.ds-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-100);
  cursor: pointer;
  border-radius: var(--radius-050);
  color: var(--text-on-color-light);
  white-space: nowrap;
  width: fit-content;

  .ds-button-icon-image {
    display: block;
    flex-shrink: 0;
    object-fit: contain;
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:disabled.filled,
  &:disabled.tonal {
    background: var(--layer-disabled) !important;
    border: 1px solid var(--layer-disabled) !important;
    color: var(--text-on-disabled) !important;
  }

  &:disabled.outlined,
  &:disabled.ghost {
    background: var(--button-contrast) !important;
    border: var(--border-0) !important;
    color: var(--text-disabled) !important;
  }

  &:disabled.white {
    background: transparent !important;
    border: var(--border-0) !important;
    color: var(--text-disabled) !important;
  }

  &.accent {
    &.filled {
      background: var(--button-primary-default);
      border: 1px solid var(--button-primary-default);

      &.active {
        background: var(--button-primary-active);
        border: 1px solid var(--button-primary-active);
      }

      &:hover {
        background: var(--button-primary-hover);
        border: 1px solid var(--button-primary-hover);
      }
    }

    &.tonal {
      background: var(--button-secondary-default);
      border: 1px solid var(--button-secondary-default);
      color: var(--text-on-color-dark);

      &.active {
        background: var(--button-secondary-active);
        border: 1px solid var(--button-secondary-active);
      }

      &:hover {
        background: var(--button-secondary-hover);
        border: 1px solid var(--button-secondary-hover);
      }
    }

    &.outlined {
      background: var(--button-contrast);
      border: 1px solid var(--border-button);
      color: var(--text-accent);

      &.active {
        border: 1px solid var(--button-contrast);
      }

      &:hover {
        border: 1px solid var(--button-secondary-default);
        background: var(--button-secondary-default);
        color: var(--text-on-color-accent);
      }
    }

    &.ghost {
      background: var(--button-contrast);
      border: 1px solid var(--button-contrast);
      color: var(--text-accent);

      &.active,
      &:hover {
        border: 1px solid var(--button-secondary-hover);
        background: var(--button-secondary-hover);
        color: var(--text-on-color-accent);
      }
    }
  }

  &.danger {
    &.filled {
      background: var(--button-danger-default);
      border: 1px solid var(--button-danger-default);
      color: var(--text-on-color-light);

      &:hover {
        background: var(--button-danger-hover);
        border: 1px solid var(--button-danger-hover);
      }

      &.active {
        background: var(--button-danger-active);
        border: 1px solid var(--button-danger-active);
      }
    }

    &.tonal {
      background: var(--button-secondary-default);
      border: 1px solid var(--button-secondary-default);
      color: var(--text-on-color-dark);

      &.active {
        background: var(--button-secondary-active);
        border: 1px solid var(--button-secondary-active);
      }

      &:hover {
        background: var(--button-secondary-hover);
        border: 1px solid var(--button-secondary-hover);
      }
    }

    &.outlined {
      background: var(--button-contrast);
      border: 1px solid var(--border-error);
      color: var(--text-error);

      &:hover {
        border: 1px solid var(--border-error-hover);
        color: var(--text-error-hover);
      }
    }

    &.ghost {
      border: var(--border-0);
      background: var(--button-contrast);
      color: var(--text-error);

      &:hover {
        color: var(--text-error-hover);
      }
    }
  }

  &.white {
    &.filled {
      background: var(--button-tertiary-default);
      border: 1px solid var(--button-tertiary-default);
      color: var(--text-on-color-accent);

      &:hover {
        background: var(--button-tertiary-hover);
      }

      &.active {
        background: var(--button-tertiary-active);
      }
    }

    &.outlined {
      background: var(--button-contrast);
      border: 1px solid var(--border-button-white);

      > svg {
        stroke: var(--icon-light-fixed);
      }

      &.active {
        border: var(--border-0);
        > svg {
          color: var(--icon-light-fixed);
          stroke: var(--icon-light-fixed);
        }
      }

      &:hover {
        > svg {
          color: var(--icon-light-fixed);
          stroke: var(--icon-light-fixed);
        }
      }
    }

    &.ghost {
      background: var(--button-contrast);
      border: none;

      > svg {
        stroke: var(--icon-light-fixed);
      }

      &.active {
        > svg {
          color: var(--icon-dark-fixed);
          stroke: var(--icon-dark-fixed);
        }
      }

      &:hover {
        background: var(--button-tertiary-hover);
        color: var(--text-on-color-accent);

        > svg {
          color: var(--icon-on-color-accent);
          stroke: var(--icon-on-color-accent);
        }
      }
    }
  }

  &.large {
    @include button-large;
    padding: var(--spacing-150) var(--spacing-250);
    height: 48px;
  }

  &.medium {
    @include button-medium;
    padding: var(--spacing-100) var(--spacing-200);
    height: 40px;
  }

  &.small {
    @include button-small;
    padding: var(--spacing-050) var(--spacing-150);
    height: 32px;
  }

  &.x-small {
    @include button-small;
    padding: var(--spacing-050) var(--spacing-100);
    height: 24px;
  }
}
