@use '../style/mixins' as *;
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;

.cancel-button .p-button {
  background-color: transparent !important;
  box-shadow: none !important;
  color: $dialog-footer-txt-color !important;
  font-weight: 600;

  &.secondary {
    border: 1px solid var(--default-btn-bg-color);
    color: var(--default-btn-bg-color);
  }

  &:not(.p-disabled):hover {
    color: $dialog-footer-txt-color;
  }

  .p-button-label {
    padding: 0;
    border-bottom: 1px solid transparent;

    &:hover {
      border-bottom: 1px solid $dialog-footer-txt-color;
    }
  }

  .p-button-label {
    line-height: 14px;
  }
}

.p-inputgroup {
  .p-button.p-button-secondary {
    &:hover:not([disabled]), &:focus:not([disabled]) {
      color: $input-txt-border-focus-color;
    }
  }

  .p-button {
    &.p-button-icon-only {
      padding: 5px;
    }
  }
}

.p-button .dvl-icon {
  font-size: 16px;
}

.default-port-button_container {
  padding-top: 25px;
}

button:after {
  height: auto !important;
}

.sensitive-button {
  float: right;
  display: inline;
  height: auto;
}

:focus {
  outline: 0;
}

.p-button-label-empty .p-button-label {
  display: none;
}

.p-button {
  background-color: $default-btn-bg-color;
  color: #fff;
  font-weight: 400;
  padding: $buttonPadding;
  border: 1px solid transparent;
  margin-right: 6px;
  border-radius: $buttonRadius;
  line-height: 14px;
  font-size: 14px;
  transition: background-color ease-in-out $transitionDuration;

  .p-button-label {
    line-height: 14px;
    padding: 0;
  }

  .p-button-icon-left {
    margin-right: 5px;

    &.p-button-loading-icon {
      font-size: 16px;
    }
  }

  &.p-button-default {
    padding: 7px 18px;
    font-size: 14px;
    border-radius: 14px;
    border: none;
    min-width: 120px;
    background-color: $default-btn-bg-color;
    color: $default-btn-text-color;
    transition: ease-in-out 300ms;

    &.p-button-label-only .p-button-label {
      padding: 0;
      line-height: 14px;
    }
  }

  &:hover:not(.p-disabled):not([disabled]) {
    background-color: $default-btn-bg-hover-color;
  }

  &:active:not(.p-disabled):not([disabled]) {
    background-color: $default-btn-bg-pressed-color;
  }

  &.error {
    background-color: var(--error-message-border-color) !important;
  }

  &.warn {
    background-color: var(--warning-message-border-color) !important;
  }
}

.p-button.p-button-secondary {
  background: var(--button-secondary-fill, var(--action-btn-outline-secondary-bg-color));
  border-color: var(--button-secondary-border, var(--action-btn-outline-secondary-border-color));
  color: var(--button-secondary-text, var(--action-btn-outline-secondary-color));

  &:hover:not(.p-disabled):not([disabled]) {
    background: var(--button-secondary-hover-fill, var(--action-btn-outline-secondary-bg-hover-color));
    border-color: var(--button-secondary-hover-border, var(--action-btn-outline-secondary-border-hover-color));
    color: var(--button-secondary-text, var(--action-btn-outline-secondary-color));
  }
}

.p-button.p-button-text {
  background: transparent;
  border-color: transparent;
  color: $default-btn-link-text-color;

  &:hover:not(.p-disabled):not([disabled]) {
    background: var(--action-btn-hover-bg-color);
    color: $default-btn-link-text-color;
  }
}

.p-btn-link {
  color: $default-btn-link-text-color !important;
  cursor: pointer;

  &:hover:not(.p-disabled):not([disabled]) {
    color: $default-btn-link-text-color-darker !important;
  }
}

.p-button.p-button-outlined {
  background-color: transparent;
  color: var(--button-secondary-text, $checkoutRequestIconNeutralColor);
  border: 1px solid var(--button-secondary-border, transparent);

  .p-button-label {
    color: currentColor;
  }

  &:enabled:hover {
    background: var(--button-secondary-hover-fill, rgba(159, 168, 218, 0.16));
    border-color: var(--button-secondary-hover-border, var(--button-secondary-border, transparent));
  }

  &:enabled:active {
    background: var(--action-btn-outline-secondary-bg-pressed-color, rgba(159, 168, 218, 0.30));
  }
}

.p-button.p-button-outlined {
  box-shadow: inset 0 0 0 1px;
}

.p-button.p-button-outlined:enabled:focus {
  box-shadow: inset 0 0 0 1px;
}

.p-button.p-button-outlined:enabled:active {
  box-shadow: inset 0 0 0 1px;
}

.p-button.p-button-link {
  color: $default-btn-link-text-color;
  background: transparent;
  border: transparent;
}
.p-button.p-button-link:enabled:hover {
  background: transparent;
  color: $default-btn-link-text-color;
  border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-label {
  text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.p-button.p-button-link:enabled:active {
  background: transparent;
  color: $default-btn-link-text-color;
  border-color: transparent;
}
