@layer atoms {
  .mobius-button {
    box-sizing: border-box;
    display: inline-block;
    outline: none;
    text-decoration: none;
    font-family: var(--font-family);
    cursor: pointer;
    color: var(--button-content-color);
    font-weight: var(--font-weight-bold);
    border-radius: var(--button-border-radius);
    border-width: var(--size-border-width);
    border-color: transparent;
    border-style: solid;
    position: relative;
    margin: 0;
    transition:
      color var(--transition-standard),
      background var(--transition-standard);

    &:where(.--has-icon) {
      display: inline-flex;
      gap: var(--button-gap);
    }

    /* Sizes */
    /* TODO: CSS variables for line-height do not produce desired height for buttons. */
    /* These hard-coded line-height values should be replaced with CSS variables. */
    &:where(.--size-sm) {
      font-size: var(--font-size-3);
      line-height: 16px;
      padding: var(--button-padding-sm);
    }

    &:where(.--size-md) {
      font-size: var(--font-size-4);
      line-height: 24px;
      padding: var(--button-padding-md);
    }

    &:where(.--size-lg) {
      font-size: var(--font-size-5);
      line-height: 32px;
      padding: var(--button-padding-lg);
    }

    /* Primary */
    &:where(.--variant-primary) {
      --button-content-color: var(--button-primary-content-color);
      background: var(--button-primary-color);
      font-variation-settings: var(--button-primary-font-variation);

      &:where(:active) {
        background: var(--button-primary-hover-color);
      }

      @media (hover: hover) {
        &:where(:hover) {
          background: var(--button-primary-hover-color);
        }
      }

      &:where(:focus-visible) {
        box-shadow: var(--box-shadow-default);
      }

      &:where(.--is-disabled) {
        --button-content-color: var(--color-text-light);
        background: var(--color-background-medium);
        cursor: not-allowed;
      }
    }

    /* Secondary */
    &:where(.--variant-secondary) {
      --button-content-color: var(--button-secondary-color);
      background: transparent;
      border-color: var(--button-secondary-color);

      &:where(:active) {
        --button-content-color: var(--color-text-inverted);
        background: var(--button-secondary-hover-color);
        border-color: var(--button-secondary-hover-color);
      }

      @media (hover: hover) {
        &:where(:hover) {
          --button-content-color: var(--color-text-inverted);
          background: var(--button-secondary-hover-color);
          border-color: var(--button-secondary-hover-color);
        }
      }

      &:where(:focus-visible) {
        box-shadow: var(--box-shadow-default);
      }

      &:where(.--is-disabled) {
        --button-content-color: var(--color-text-light);
        border-color: transparent;
        background: var(--color-background-medium);
        cursor: not-allowed;
      }
    }

    /* Ghost */
    &:where(.--variant-ghost) {
      --button-content-color: var(--color-secondary);
      background: var(--color-background-highlight);
      border: var(--border-default);
      border-color: transparent;

      &:where(:active) {
        --button-content-color: var(--color-text-inverted);
        border-color: transparent;
        background: var(--color-secondary-hover);
      }

      @media (hover: hover) {
        &:where(:hover) {
          --button-content-color: var(--color-text-inverted);
          border-color: transparent;
          background: var(--color-secondary-hover);
        }
      }

      &:where(:focus-visible) {
        box-shadow: var(--box-shadow-default);
      }

      &:where(.--is-disabled) {
        --button-content-color: var(--color-text-light);
        border-color: transparent;
        background: var(--color-background-medium);
        cursor: not-allowed;
      }
    }

    /* Basic */
    &:where(.--variant-basic) {
      --button-content-color: var(--color-text);
      border-color: transparent;
      background: transparent;

      &:where(:active) {
        background: var(--color-background-light);
      }

      @media (hover: hover) {
        &:where(:hover) {
          background: var(--color-background-light);
        }
      }

      &:where(:focus-visible) {
        box-shadow: var(--box-shadow-default);
      }

      &:where(.--is-disabled) {
        --button-content-color: var(--color-text-light);
        background: var(--color-background-medium);
        cursor: not-allowed;
      }
    }

    /* Success */
    &:where(.--is-success) {
      background: var(--color-valid);
      border-color: var(--color-valid);
      color: transparent;

      /* Hide content, but keep same space occupied */
      & > :not(.mobius-button__icon-wrapper) {
        opacity: 0;
        visibility: hidden;
      }

      /* Show succces/tick icon */
      & [data-icon="tick"] path {
        fill: var(--color-text-inverted);
      }

      /* Link variant is the exception */
      &:where(.--variant-link) [data-icon="tick"] path {
        fill: var(--button-content-color);
      }

      @media (hover: hover) {
        &:where(:hover) {
          background: var(--color-valid-hover);
          border-color: var(--color-valid-hover);
        }
      }

      &:where(:active) {
        background: var(--color-valid);
      }

      &:where(.--is-disabled) {
        border-color: transparent;
        color: transparent;
        background: var(--color-background-medium);
        cursor: not-allowed;
      }
    }

    /* Loading */
    &:where(.--is-loading) {
      /* Hide text */
      color: transparent;

      /* Hide content, but keep same space occupied */
      & > :not(.mobius-button__icon-wrapper) {
        opacity: 0;
        visibility: hidden;
      }

      /* Show loading icon */
      & [data-icon="loading"] path {
        fill: var(--button-content-color);
      }
    }

    /* Link */
    &:where(.--variant-link) {
      --button-content-color: var(--button-link-color, var(--color-secondary));
      appearance: none;
      padding: var(--size-xxs);
      background: transparent;
      font-weight: normal;
      border-radius: var(
        --button-link-border-radius,
        var(--button-border-radius)
      );

      &:where(:not(.--is-loading)) {
        text-decoration: underline;
      }

      &:active {
        --button-content-color: var(
          --button-link-hover-color,
          var(--color-secondary-hover)
        );
        text-decoration: var(--button-link-hover-text-decoration, underline);
        cursor: pointer;
      }

      @media (hover: hover) {
        &:hover {
          --button-content-color: var(
            --button-link-hover-color,
            var(--color-secondary-hover)
          );
          text-decoration: var(--button-link-hover-text-decoration, underline);
          cursor: pointer;
        }
      }

      &:focus-visible {
        box-shadow: var(--button-link-box-shadow, var(--box-shadow-default));
      }

      &.--is-disabled {
        --button-content-color: var(--color-text-light);
        cursor: not-allowed;
      }
    }
  }

  .mobius-button__icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
  }
}
