/*
 * Button base styles
 */

.amplify-button {
  align-items: center;
  border-color: var(--amplify-components-button-border-color);
  border-radius: var(--amplify-components-button-border-radius);
  border-style: var(--amplify-components-button-border-style);
  border-width: var(--amplify-components-button-border-width);
  box-sizing: border-box;
  color: var(--amplify-components-button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--amplify-components-button-font-size);
  font-weight: var(--amplify-components-button-font-weight);
  justify-content: center;
  line-height: var(--amplify-components-button-line-height);
  padding-block-start: var(--amplify-components-button-padding-block-start);
  padding-block-end: var(--amplify-components-button-padding-block-end);
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
  transition: all var(--amplify-components-button-transition-duration);
  user-select: none;

  //These are the internal css variables that are used to update the values that are updated by multiple modifiers
  --amplify-internal-button-disabled-color: var(
    --amplify-components-button-disabled-color
  );
  --amplify-internal-button-disabled-background-color: var(
    --amplify-components-button-disabled-background-color
  );
  --amplify-internal-button-disabled-border-color: var(
    --amplify-components-button-disabled-border-color
  );
  --amplify-internal-button-disabled-text-decoration: initial;
  --amplify-internal-button-loading-background-color: var(
    --amplify-components-button-loading-background-color
  );
  --amplify-internal-button-loading-border-color: var(
    --amplify-components-button-loading-border-color
  );
  --amplify-internal-button-loading-color: var(
    --amplify-components-button-loading-color
  );
  --amplify-internal-button-loading-text-decoration: initial;

  &:hover {
    background-color: var(--amplify-components-button-hover-background-color);
    border-color: var(--amplify-components-button-hover-border-color);
    color: var(--amplify-components-button-hover-color);
  }

  &:focus {
    background-color: var(--amplify-components-button-hover-background-color);
    border-color: var(--amplify-components-button-focus-border-color);
    color: var(--amplify-components-button-focus-color);
    box-shadow: var(--amplify-components-button-focus-box-shadow);
  }

  &:active {
    background-color: var(--amplify-components-button-active-background-color);
    border-color: var(--amplify-components-button-active-border-color);
    color: var(--amplify-components-button-active-color);
  }

  &--fullwidth {
    width: 100%;
  }
  &--menu {
    border-width: var(--amplify-components-button-menu-border-width);
    background-color: var(--amplify-components-button-menu-background-color);
    justify-content: var(--amplify-components-button-menu-justify-content);

    &:hover {
      color: var(--amplify-components-button-menu-hover-color);
      background-color: var(
        --amplify-components-button-menu-hover-background-color
      );
    }

    &:focus {
      box-shadow: none;
      color: var(--amplify-components-button-menu-focus-color);
      background-color: var(
        --amplify-components-button-menu-focus-background-color
      );
    }

    &:active {
      color: var(--amplify-components-button-menu-active-color);
      background-color: var(
        --amplify-components-button-menu-active-background-color
      );
    }

    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-menu-disabled-color
    );
  }

  &--primary {
    border-width: var(--amplify-components-button-primary-border-width);
    background-color: var(--amplify-components-button-primary-background-color);
    border-color: var(--amplify-components-button-primary-border-color);
    color: var(--amplify-components-button-primary-color);

    &:hover {
      background-color: var(
        --amplify-components-button-primary-hover-background-color
      );
      border-color: var(--amplify-components-button-primary-hover-border-color);
      color: var(--amplify-components-button-primary-hover-color);
    }

    &:focus {
      background-color: var(
        --amplify-components-button-primary-focus-background-color
      );
      border-color: var(--amplify-components-button-primary-focus-border-color);
      color: var(--amplify-components-button-primary-focus-color);
      box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
    }

    &:active {
      background-color: var(
        --amplify-components-button-primary-active-background-color
      );
      border-color: var(
        --amplify-components-button-primary-active-border-color
      );
      color: var(--amplify-components-button-primary-active-color);
    }

    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-primary-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-primary-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-primary-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-primary-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-primary-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-primary-loading-color
    );
  }

  &--link {
    border-width: var(--amplify-components-button-link-border-width);
    background-color: var(--amplify-components-button-link-background-color);
    color: var(--amplify-components-button-link-color);

    --amplify-internal-button-disabled-text-decoration: none;
    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-link-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-link-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-link-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-link-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-link-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-link-loading-color
    );
    --amplify-internal-button-loading-text-decoration: none;

    &:hover {
      background-color: var(
        --amplify-components-button-link-hover-background-color
      );
      border-color: var(--amplify-components-button-link-hover-border-color);
      color: var(--amplify-components-button-link-hover-color);
    }

    &:focus {
      background-color: var(
        --amplify-components-button-link-focus-background-color
      );
      border-color: var(--amplify-components-button-link-focus-border-color);
      color: var(--amplify-components-button-link-focus-color);
      box-shadow: var(--amplify-components-button-link-focus-box-shadow);
    }

    &:active {
      background-color: var(
        --amplify-components-button-link-active-background-color
      );
      border-color: var(--amplify-components-button-link-active-border-color);
      color: var(--amplify-components-button-link-active-color);
    }
  }

  &--destructive {
    border-width: var(--amplify-components-button-destructive-border-width);
    background-color: var(
      --amplify-components-button-destructive-background-color
    );
    border-color: var(--amplify-components-button-destructive-border-color);
    color: var(--amplify-components-button-destructive-color);

    &:hover {
      background-color: var(
        --amplify-components-button-destructive-hover-background-color
      );
      border-color: var(
        --amplify-components-button-destructive-hover-border-color
      );
      color: var(--amplify-components-button-destructive-hover-color);
    }

    &:focus {
      background-color: var(
        --amplify-components-button-destructive-focus-background-color
      );
      border-color: var(
        --amplify-components-button-destructive-focus-border-color
      );
      color: var(--amplify-components-button-destructive-focus-color);
      box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
    }

    &:active {
      background-color: var(
        --amplify-components-button-destructive-active-background-color
      );
      border-color: var(
        --amplify-components-button-destructive-active-border-color
      );
      color: var(--amplify-components-button-destructive-active-color);
    }

    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-destructive-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-destructive-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-destructive-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-destructive-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-destructive-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-destructive-loading-color
    );
  }

  &--warning {
    background-color: var(--amplify-components-button-warning-background-color);
    border-color: var(--amplify-components-button-warning-border-color);
    border-width: var(--amplify-components-button-warning-border-width);
    color: var(--amplify-components-button-warning-color);

    --amplify-internal-button-disabled-text-decoration: none;
    --amplify-internal-button-disabled-border-color: var(
      --amplify-components-button-warning-disabled-border-color
    );
    --amplify-internal-button-disabled-background-color: var(
      --amplify-components-button-warning-disabled-background-color
    );
    --amplify-internal-button-disabled-color: var(
      --amplify-components-button-warning-disabled-color
    );
    --amplify-internal-button-loading-background-color: var(
      --amplify-components-button-warning-loading-background-color
    );
    --amplify-internal-button-loading-border-color: var(
      --amplify-components-button-warning-loading-border-color
    );
    --amplify-internal-button-loading-color: var(
      --amplify-components-button-warning-loading-color
    );
    --amplify-internal-button-loading-text-decoration: none;

    &:hover {
      background-color: var(
        --amplify-components-button-warning-hover-background-color
      );
      border-color: var(--amplify-components-button-warning-hover-border-color);
      color: var(--amplify-components-button-warning-hover-color);
    }

    &:focus {
      background-color: var(
        --amplify-components-button-warning-focus-background-color
      );
      border-color: var(--amplify-components-button-warning-focus-border-color);
      color: var(--amplify-components-button-warning-focus-color);
      box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
    }

    &:active {
      background-color: var(
        --amplify-components-button-warning-active-background-color
      );
      border-color: var(
        --amplify-components-button-warning-active-border-color
      );
      color: var(--amplify-components-button-warning-active-color);
    }
  }

  &--small {
    font-size: var(--amplify-components-button-small-font-size);
    padding-block-start: var(
      --amplify-components-button-small-padding-block-start
    );
    padding-block-end: var(--amplify-components-button-small-padding-block-end);
    padding-inline-start: var(
      --amplify-components-button-small-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-button-small-padding-inline-end
    );
  }

  &--large {
    font-size: var(--amplify-components-button-large-font-size);
    padding-block-start: var(
      --amplify-components-button-large-padding-block-start
    );
    padding-block-end: var(--amplify-components-button-large-padding-block-end);
    padding-inline-start: var(
      --amplify-components-button-large-padding-inline-start
    );
    padding-inline-end: var(
      --amplify-components-button-large-padding-inline-end
    );
  }
  &--disabled {
    background-color: var(--amplify-internal-button-disabled-background-color);
    border-color: var(--amplify-internal-button-disabled-border-color);
    color: var(--amplify-internal-button-disabled-color);
    text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    cursor: not-allowed;
    &:hover {
      background-color: var(
        --amplify-internal-button-disabled-background-color
      );
      border-color: var(--amplify-internal-button-disabled-border-color);
      color: var(--amplify-internal-button-disabled-color);
      text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    }
    :focus {
      background-color: var(
        --amplify-internal-button-disabled-background-color
      );
      border-color: var(--amplify-internal-button-disabled-border-color);
      color: var(--amplify-internal-button-disabled-color);
      text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    }
    &:active {
      background-color: var(
        --amplify-internal-button-disabled-background-color
      );
      border-color: var(--amplify-internal-button-disabled-border-color);
      color: var(--amplify-internal-button-disabled-color);
      text-decoration: var(--amplify-internal-button-disabled-text-decoration);
    }
  }

  &--loading {
    background-color: var(--amplify-internal-button-loading-background-color);
    border-color: var(--amplify-internal-button-loading-border-color);
    color: var(--amplify-components-button-loading-color);
    text-decoration: var(--amplify-internal-button-loading-text-decoration);
    &:hover {
      background-color: var(--amplify-internal-button-loading-background-color);
      border-color: var(--amplify-internal-button-loading-border-color);
      color: var(--amplify-components-button-loading-color);
      text-decoration: var(--amplify-internal-button-loading-text-decoration);
    }
    &:focus {
      background-color: var(--amplify-internal-button-loading-background-color);
      border-color: var(--amplify-internal-button-loading-border-color);
      color: var(--amplify-components-button-loading-color);
      text-decoration: var(--amplify-internal-button-loading-text-decoration);
    }
    &:active {
      background-color: var(--amplify-internal-button-loading-background-color);
      border-color: var(--amplify-internal-button-loading-border-color);
      color: var(--amplify-components-button-loading-color);
      text-decoration: var(--amplify-internal-button-loading-text-decoration);
    }
  }

  &__loader-wrapper {
    align-items: var(--amplify-components-button-loader-wrapper-align-items);
    gap: var(--amplify-components-button-loader-wrapper-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .amplify-button {
    transition: none;
  }
}