@use "../../settings";

/*
#{settings.$prefix}-button

The button unit.

Weight: -1060

Style guide: #{settings.$prefix}-button
*/

/*
Core

The core module.

Weight: -100

Style guide: #{settings.$prefix}-button.core
*/

/*
Default style

The default style.

Weight: -100

Markup: <!-- with anchor element -->
<a class="#{settings.$prefix}-button" href="#">
  <span class="#{settings.$prefix}-button__label  #{settings.$prefix}-text">Lorem ipsum dolor sit amet.</span>
</a>
<!-- with button element -->
<button class="#{settings.$prefix}-button">
  <span class="#{settings.$prefix}-button__label  #{settings.$prefix}-text">あのイーハトーヴォのすきとおった風。</span>
</button>

Style guide: #{settings.$prefix}-button.core.default
*/
.#{settings.$prefix}-button {
  $pkg: settings.$pkg;

  --cursor: pointer;
  --overflow: hidden;
  --box-sizing: border-box;

  // For button element, because it always `inline-block`
  --width: 100%;
  --font-size: var(--#{$pkg}-font-size);
  --font-weight: var(--#{$pkg}-font-weight);
  --font-style: normal;
  --line-height: 1;
  --text-align: center;
  --text-decoration: none;
  --text-indent: 0;
  --letter-spacing: 0;
  --white-space: normal;
  --vertical-align: baseline;
  --appearance: none;

  // For label
  --label-font-size: inherit;
  --label-line-height: normal;
  --label-color: inherit;
  --label-text-align: center;
  --label-background-color: transparent;

  font-size: var(--font-size);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  line-height: var(--line-height);
  text-align: var(--text-align);
  text-decoration: var(--text-decoration);
  text-indent: var(--text-indent);
  white-space: var(--white-space);
  vertical-align: var(--vertical-align);

  appearance: var(--appearance);

  &:where(button) {
    cursor: var(--cursor);
  }

  &__label {
    --font-size: var(--label-font-size);
    --line-height: var(--label-line-height);
    --color: var(--label-color);
    --text-align: var(--label-text-align);
    --background-color: var(--label-background-color);
  }
}