:where(.fs-block-button) {
  --gap: 0.6em;
  --multiplier: 1;
  --icon-width: 1.2em;
  --border-width: 1.5px;
  --transition-duration: 0.3s;
  --foreground-color: currentcolor;
  --background-color: transparent;
  --background-color-darker: lch(from var(--background-color) calc(l - 10) c h);

  &.is-style-fill {
    --foreground-color: var(--fs-blocks-color-white);
    --background-color: var(--fs-blocks-color-primary);
  }

  &.is-style-underline {
    --foreground-color: currentcolor;
    --background-color: var(--fs-blocks-color-primary); /* Underline */
  }

  &.is-style-outline {
    --foreground-color: currentcolor;
    --background-color: var(--foreground-color); /* Border */
  }

  &.is-style-muted,
  &.is-style-blank {
    --foreground-color: currentcolor; /* Color and background */
  }
}

.wp-element-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  text-align: center;
  vertical-align: baseline;
  border-radius: var(--fs-blocks-radius);
  transition-property: transform, border-color, background-color, box-shadow, opacity, color;
  transition-duration: var(--transition-duration);

  &:has(.fs-block-icon + .fs-block-button__text) {
    --multiplier: -1;
  }

  /* Icon only button */
  &.is-icon {
    flex-shrink: 0;
    padding-inline: 0em;
    width: var(--fs-blocks-input-height);
    height: var(--fs-blocks-input-height);

    > .fs-icon {
      stroke-width: 1.5px;
      --fs-nav-dropdown-toggle-icon-size: 1.5em;
      --fs-size: 1.5em;
    }
  }

  &.is-style-blank,
  &.is-style-underline {
    &.is-icon {
      width: 2em;
      height: 2em;
    }
  }

  &.is-style-fill {
    color: var(--foreground-color);
    background: var(--background-color);
  }

  &.is-style-blank {
    color: var(--foreground-color, currentcolor);
    background: transparent;
    border-color: transparent;
    box-shadow: none;

    &:not([disabled]):hover {
      opacity: 0.7;
    }
  }

  &.is-style-outline {
    color: var(--foreground-color, currentcolor);
    background: transparent;
    box-shadow: none;
    border-width: 1px;
    border-color: var(--background-color, var(--foreground-color, currentcolor));

    &.is-white {
      color: currentcolor;
      border-color: rgba(0, 0, 0, 0.05);

      &:not([disabled]):hover {
        border-color: var(--background-color-darker);
      }
    }

    &:not([disabled]):hover {
      opacity: 0.7;
    }
  }

  &.is-style-underline {
    color: var(--foreground-color, currentcolor);
    background: transparent;
    border-color: transparent;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 20%;
      width: 60%;
      height: var(--border-width);
      opacity: 0.3;
      background: var(--background-color, var(--foreground-color, currentcolor));
      transition-property: left, width, opacity;
      transition-duration: var(--transition-duration);
    }

    &:not([disabled]):hover {
      opacity: 0.7;

      &::before {
        left: 0;
        width: 100%;
        opacity: 1;
      }
    }
  }

  &.is-style-muted {
    position: relative;
    color: var(--foreground-color, currentcolor);
    background: transparent;
    border-color: transparent;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--foreground-color, currentcolor);
      opacity: 0.05;
      border-radius: inherit;
      pointer-events: none;
    }

    &:not([disabled]):hover::after {
      opacity: 0.1;
    }
  }

  &:not([disabled]):not(.is-style-blank, .is-style-outline, .is-style-underline, .is-style-muted):hover {
    color: var(--foreground-color);
    border-color: var(--background-color-darker);
    background-color: var(--background-color-darker);
  }

  &.hover-reveal-icon {
    .fs-block-button__text {
      transform: translateX(calc(var(--multiplier) * calc(calc(var(--icon-width) / 2) + calc(var(--gap) / 2))));
      transition: transform var(--transition-duration);
    }

    .fs-block-icon {
      opacity: 0;
      scale: 0.9;
      transition:
        opacity var(--transition-duration),
        scale var(--transition-duration);
    }

    &:not([disabled]):hover {
      .fs-block-button__text {
        transform: none;
      }

      .fs-block-icon {
        opacity: 1;
        scale: 1;
      }
    }
  }
}

.fs-block-button.is-expanded {
  display: flex;
  width: 100%;
}

:where(.fs-block-button).is-expanded {
  margin-inline: 0;
}

:where(.fs-flex) > .fs-block-button.is-expanded {
  width: auto;
  align-self: stretch;
}

.wp-element-button.fs-block-button:not(.is-style-blank, .is-style-outline, .is-style-underline, .is-style-muted) {
  color: var(--foreground-color);
}

/* Add some space between buttons */
.fs-block-button:where(:not(.is-expanded, .fs-block-popover, :last-child, :only-child)) {
  margin-inline-end: var(--fs-blocks-spacing-sm);
}

.fs-block-button__text {
  position: relative;
  flex: 1;
}