// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import * as React from 'react';

export const SubtleContentAlignment = () => {
    const styles = /* css */ `
      .button-example__aligned-action {
        margin-inline: calc(-1 * var(--spacingHorizontalS));
      }
    `;
    return (<>
        <style>{styles}</style>
        <Text as="h2" block preset="heading4" foreground={1}>
          Aligning subtle button content to surrounding text
        </Text>
        <Text as="p" block>
          Subtle and transparent buttons keep the same horizontal padding as filled buttons, so
          their visible content sits inset from surrounding text. A matching negative inline margin
          optically aligns the button's content to this paragraph's edge while keeping the full
          padded hit target for click and focus.
        </Text>
        <Button appearance="subtle" size="small" className="button-example__aligned-action">
          Aligned action
        </Button>
      </>);
};

export default SubtleContentAlignment;