.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-light {
    @extend .button.arrow.light;

    a.wp-block-button__link {
      @apply
        font-light;

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

  &.is-style-arrow,
  &.is-style-arrow-light {
    &.has-xxs-font-size {
      .wp-block-button__link {
        @apply
          after:h-2.5
          after:top-0
          after:w-2;
      }
    }

    &.has-xs-font-size {
      .wp-block-button__link {
        @apply
          after:h-3.5
          after:top-0
          after:w-3;
      }
    }

    &.has-sm-font-size {
      .wp-block-button__link {
        @apply
          after:h-3.5
          after:top-px
          after:w-3;
      }
    }

    &.has-base-font-size {
      .wp-block-button__link {
        @apply
          after:h-3
          after:top-px
          after:w-5.5

          after:lg:h-4
          after:lg:top-px
          after:lg:w-3.5;
      }
    }

    &.has-lg-font-size {
      .wp-block-button__link {
        @apply
          after:h-4.5
          after:top-px
          after:w-4;
      }
    }

    &.has-xl-font-size {
      .wp-block-button__link {
        @apply
          after:h-4.5
          after:top-px
          after:ml-8
          after:w-4

          after:lg:h-6
          after:lg:top-[2px]
          after:lg:w-5.5;
      }
    }

    &.has-2-xl-font-size {
      .wp-block-button__link {
        @apply
          after:lg:h-10
          after:ml-10
          after:lg:top-[2px]
          after:lg:w-6.5

          after:h-6
          after:top-[2px]
          after:w-5.5;
      }
    }

    &.has-3-xl-font-size {
      .wp-block-button__link {
        @apply
          after:h-15
          after:ml-12
          after:top-[2px]
          after:w-14;
      }
    }

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

      @apply
        after:ml-2.5
        after:w-5
        after:top-[2px]
        after:h-5
        after:relative
        after:bg-center
        after:left-0
        after:bg-contain
        after:bg-no-repeat
        after:transition-all;

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

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