.inline-button {
  $inline-button-spacing: -4;
  $inline-button-padding: -5;

  @include set-font(0, "single");
  display: inline-flex;
  align-items: center;
  color: color("foreground-theme");

  @include icon-style {
    @include set-font(-1, "single");
    @include set-colors("theme");
    display: inline-flex;
    align-items: center;
    justify-content: center;
    $size: spacing($inline-button-padding, $times: 2, $add: line-height("single", $include-calc: false));
    width: $size;
    height: $size;
    border-radius: 50%;
    order: 100; //move icon on the right
    margin-left: spacing($inline-button-spacing);
    box-shadow: $shadow-style-front color("shadow");
    margin-top: spacing($inline-button-padding, $times: -1);
    margin-bottom: spacing($inline-button-padding, $times: -1);
  }


  &:focus-visible {
    outline: $outline-width solid color("utility-focus");
    outline-offset: $outline-offset;
  }

  &:hover {
    color: color("foreground-theme-hover");
    cursor: pointer;

    &::before {
      background-color: color("theme-hover");
    }
  } 

  &:active {
    &::before {
      box-shadow: $shadow-style-back color("shadow");
    }
  }

  &--icon-left {
    &::before {
      order: -1;
      margin-left: 0;
      margin-right: spacing($inline-button-spacing)
    }
  }

  &--dimmed {
    color: color("foreground-theme");

    &::before {
      @include set-colors("background");
      color: color("foreground-theme");
      box-shadow: $shadow-style-center color("shadow");
    }

    &:hover {
      color: color("foreground-theme-hover");

      &::before {
        background-color: color("background-hover");
      }
    }
  }
}