.wp-block-button {
  &.alignleft {
    .wp-block-button__link {
      padding-left: 0 !important;
    }
  }

  &.alignright {
    .wp-block-button__link {
      padding-left: 0 !important;
    }
  }

  &.is-style-outline,
  &.is-style-default {
    .wp-block-button__link {
      @extend .button;
      @extend .button.outlined;
      @extend .button.outlined:hover;

      @each $name, $color in $gutenberg-colors {
        &.has-text-color.has-#{$name}-color {
          border-color: $color !important;
        }
      }
    }
  }

  .wp-block-button__link {
    @apply
      px-0;

    &.has-text-color.has-white-color {
      &::after {
        background-image: url("../images/arrow-right-white.svg");
      }

      &:hover {
        &::after {
          @apply
            opacity-100;
        }
      }
    }
  }

  &.is-style-fill {
    .wp-block-button__link {
      @extend .button;
      @extend .button.filled;
    }
  }

  &.is-style-light {
    .wp-block-button__link {
      @extend .button;
      @extend .button.light;
    }
  }

  &.is-style-arrow {
    .wp-block-button__link {
      @extend .button;
      @extend .button.arrow;
      @extend .button.arrow:hover;

      @apply
        after:ml-2.5
        after:w-3
        after:relative
        after:left-0
        after:h-2.5
        after:bg-contain
        after:bg-no-repeat
        after:transition-all;

      &:hover {
        &::after {
          @apply
            left-1
            opacity-50;
        }
      }

      &::after {
        background-image: url("../images/arrow-right.svg");
      }
    }
  }
}
