@include component-rules($petals--button-component-name) {
  @include ellipsis(true);

  min-width: var($__petals--button-min-width, $petals--button-min-width);
  max-width: var($__petals--button-max-width, $petals--button-max-width);
  padding:
    var($__petals--button-padding-y, $petals--button-padding-y)
    var($__petals--button-padding-x, $petals--button-padding-x);
  font-size: var($__petals--button-font-size, $petals--button-font-size);
  line-height: var($__petals--button-line-height, $petals--button-line-height);
  color: var($__petals--button-color, $petals--button-color);
  border: {
    width: var($__petals--button-border-width, $petals--button-border-width);
    color: var($__petals--button-border-color, $petals--button-border-color);
    radius: var($__petals--button-border-radius, $petals--button-border-radius);
  }
  background: {
    color: var($__petals--button-bg, $petals--button-bg);
    image: var($__petals--button-bg-image, $petals--button-bg-image);
  }

  &:hover {
    border-color: var($__petals--button-hover-border-color, $petals--button-hover-border-color);
    color: var($__petals--button-hover-color, $petals--button-hover-color);
    background-color: var($__petals--button-hover-bg, $petals--button-hover-bg);
    cursor: pointer;
  }

  &:focus,
  &:active {
    border-color: var($__petals--button-focus-border-color, $petals--button-focus-border-color);
    color: var($__petals--button-focus-color, $petals--button-focus-color);
    background: {
      color: var($__petals--button-focus-bg, $petals--button-focus-bg);
      image: var($__petals--button-focus-bg-image, $petals--button-focus-bg-image);
    }
  }

  &.is-disabled {
    text-shadow: none;
    box-shadow: none;
    cursor: not-allowed;

    &,
    &:hover,
    &:focus,
    &:active {
      border-color: var($__petals--button-disabled-border-color, $petals--button-disabled-border-color);
      color: var($__petals--button-disabled-color, $petals--button-disabled-color);
      opacity: var($__petals--button-disabled-opacity, $petals--button-disabled-opacity);
      background: {
        color: var($__petals--button-disabled-bg, $petals--button-disabled-bg);
        image: var($__petals--button-disabled-bg-image, $petals--button-disabled-bg-image);
      }
    }
  }

  &--large {
    padding:
      var($__petals--button-padding-y-lg, $petals--button-padding-y-lg)
      var($__petals--button-padding-x-lg, $petals--button-padding-x-lg);
    border-radius: var($__petals--button-border-radius-lg, $petals--button-border-radius-lg);
    font-size: var($__petals--button-font-size-lg, $petals--button-font-size-lg);
  }

  &--small {
    padding:
      var($__petals--button-padding-y-sm, $petals--button-padding-y-sm)
      var($__petals--button-padding-x-sm, $petals--button-padding-x-sm);
    border-radius: var($__petals--button-border-radius-sm, $petals--button-border-radius-sm);
    font-size: var($__petals--button-font-size-sm, $petals--button-font-size-sm);
  }

  &--solid,
  &--borderless {
    border-style: solid;
  }

  &--dashed {
    border-style: dashed;
  }

  &--borderless {
    border-color: transparent !important;

    &:hover {
      color: var($__petals--button-borderless-hover-color, $petals--button-borderless-hover-color);
      background-color: var($__petals--button-borderless-hover-bg, $petals--button-borderless-hover-bg);
    }

    &:focus,
    &:active,
    &.is-active {
      color: var($__petals--button-borderless-focus-color, $petals--button-borderless-focus-color);
      background-color: var($__petals--button-borderless-focus-bg, $petals--button-borderless-focus-bg);
    }
  }

  &--primary {
    border-color: var($__petals--button-primary-border-color, $petals--button-primary-border-color);
    color: var($__petals--button-primary-color, $petals--button-primary-color);
    box-shadow: var($__petals--button-primary-box-shadow, $petals--button-primary-box-shadow);
    background: {
      color: var($__petals--button-primary-bg, $petals--button-primary-bg);
      image: var($__petals--button-primary-bg-image, $petals--button-primary-bg-image);
    }

    &:hover {
      border-color: var($__petals--button-primary-hover-border-color, $petals--button-primary-hover-border-color);
      color: var($__petals--button-primary-hover-color, $petals--button-primary-hover-color);
      background: {
        color: var($__petals--button-primary-hover-bg, $petals--button-primary-hover-bg);
        image: var($__petals--button-primary-hover-bg-image, $petals--button-primary-hover-bg-image);
      }
    }

    &:focus,
    &:active,
    &.is-active {
      border-color: var($__petals--button-primary-focus-border-color, $petals--button-primary-focus-border-color);
      color: var($__petals--button-primary-focus-color, $petals--button-primary-focus-color);
      background: {
        color: var($__petals--button-primary-focus-bg, $petals--button-primary-focus-bg);
        image: var($__petals--button-primary-focus-bg-image, $petals--button-primary-focus-bg-image);
      }
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        border-color:
          var(
            $__petals--button-primary-disabled-border-color,
            $petals--button-primary-disabled-border-color
          );
        color: var($__petals--button-primary-disabled-color, $petals--button-primary-disabled-color);
        opacity: var($__petals--button-primary-disabled-opacity, $petals--button-primary-disabled-opacity);
        background: {
          color: var($__petals--button-primary-disabled-bg, $petals--button-primary-disabled-bg);
          image: var($__petals--button-primary-disabled-bg-image, $petals--button-primary-disabled-bg-image);
        }
      }
    }
  }

  &--danger {
    border-color: var($__petals--button-danger-border-color, $petals--button-danger-border-color);
    color: var($__petals--button-danger-color, $petals--button-danger-color);
    background: {
      color: var($__petals--button-danger-bg, $petals--button-danger-bg);
      image: var($__petals--button-danger-bg-image, $petals--button-danger-bg-image);
    }

    &:hover {
      border-color: var($__petals--button-danger-hover-border-color, $petals--button-danger-hover-border-color);
      color: var($__petals--button-danger-hover-color, $petals--button-danger-hover-color);
      background: {
        color: var($__petals--button-danger-hover-bg, $petals--button-danger-hover-bg);
        image: var($__petals--button-danger-hover-bg-image, $petals--button-danger-hover-bg-image);
      }
    }

    &:focus,
    &:active,
    &.is-active {
      border-color: var($__petals--button-danger-focus-border-color, $petals--button-danger-focus-border-color);
      color: var($__petals--button-danger-focus-color, $petals--button-danger-focus-color);
      background: {
        color: var($__petals--button-danger-focus-bg, $petals--button-danger-focus-bg);
        image: var($__petals--button-danger-focus-bg-image, $petals--button-danger-focus-bg-image);
      }
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        border-color: var($__petals--button-danger-disabled-border-color, $petals--button-danger-disabled-border-color);
        color: var($__petals--button-danger-disabled-color, $petals--button-danger-disabled-color);
        opacity: var($__petals--button-danger-disabled-opacity, $petals--button-danger-disabled-opacity);
        background: {
          color: var($__petals--button-danger-disabled-bg, $petals--button-danger-disabled-bg);
          image: var($__petals--button-danger-disabled-bg-image, $petals--button-danger-disabled-bg-image);
        }
      }
    }
  }

  &--outlined {
    border-color: var($__petals--button-outlined-border-color, $petals--button-outlined-border-color);
    color: var($__petals--button-outlined-color, $petals--button-outlined-color);
    background: transparent none 0 0 !important;
  }

  &--primary#{&}--outlined:not(.is-disabled) {
    border-color: var($__petals--button-primary-outlined-border-color, $petals--button-primary-outlined-border-color);
    color: var($__petals--button-primary-outlined-color, $petals--button-primary-outlined-color);

    &:hover {
      border-color: var($__petals--button-primary-outlined-hover-border-color, $petals--button-primary-outlined-hover-border-color);
      color: var($__petals--button-primary-outlined-hover-color, $petals--button-primary-outlined-hover-color);
    }

    &:focus,
    &:active,
    &.is-active {
      border-color: var($__petals--button-primary-outlined-focus-border-color, $petals--button-primary-outlined-focus-border-color);
      color: var($__petals--button-primary-outlined-focus-color, $petals--button-primary-outlined-focus-color);
    }
  }

  &--danger#{&}--outlined:not(.is-disabled) {
    border-color: var($__petals--button-danger-outlined-border-color, $petals--button-danger-outlined-border-color);
    color: var($__petals--button-danger-outlined-color, $petals--button-danger-outlined-color);

    &:hover {
      border-color: var($__petals--button-danger-outlined-hover-border-color, $petals--button-danger-outlined-hover-border-color);
      color: var($__petals--button-danger-outlined-hover-color, $petals--button-danger-outlined-hover-color);
    }

    &:focus,
    &:active,
    &.is-active {
      border-color: var($__petals--button-danger-outlined-focus-border-color, $petals--button-danger-outlined-focus-border-color);
      color: var($__petals--button-danger-outlined-focus-color, $petals--button-danger-outlined-focus-color);
    }
  }
}