.snb-fortrydelsesknap-button,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a[href^="#snb-fortrydelsesknap-"] {
  --fortrydelsesknap-spacing-inline: 1rem;

  color: var(--wp--custom--color--text-inverted);
  background-color: var(--wp--custom--state-color--danger--600);
  padding-inline: var(--fortrydelsesknap-spacing-inline);
  border: 0;
  border-radius: var(--wp--custom--border-radius--button);
  font-size: inherit;
  cursor: pointer;

  &:hover {
    background-color: var(--wp--custom--state-color--danger--700);
  }
  
  &.snb-fortrydelsesknap-button-has-status {
    position: relative;
    background-color: var(--wp--custom--color--action-primary-disabled);
    color: var(--wp--custom--color--action-primary-text-disabled);
    cursor: default;
    padding-inline: calc(var(--fortrydelsesknap-spacing-inline) + 12px) var(--fortrydelsesknap-spacing-inline);
  
    &:hover {
      background-color: var(--wp--custom--color--action-primary-disabled) !important;
    }
  
    &::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 999px;
    }
    &.snb-fortrydelsesknap-button-pending::before {
      background-color: var(--wp--custom--state-color--danger--500);
    }
    &.snb-fortrydelsesknap-button-processing::before {
      background-color: var(--wp--custom--state-color--info--500);
    }
    &.snb-fortrydelsesknap-button-completed::before {
      background-color: var(--wp--custom--state-color--success--500);
    }
    &.snb-fortrydelsesknap-button-cancelled::before {
      background-color: var(--wp--custom--state-color--warning--500);
    }
  }
}

.snb-fortrydelsesknap-dialog {
  --fortrydelsesknap-dialog-color-backdrop: rgb(0 0 0 / 50%);
  --fortrydelsesknap-dialog-width: 40rem;

  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: var(--wp--custom--color--text);
  background-color: var(--wp--custom--color--surface-primary);
  width: min(40rem, calc(100% - 2rem));
  margin: 0;
  padding-block: var(--wp--custom--spacing--card--block);
  padding-inline: var(--wp--custom--spacing--card--inline);
  border: 0;
  border-radius: var(--wp--custom--border-radius--surface);
  font-size: inherit;

  &::backdrop {
    background-color: var(--fortrydelsesknap-dialog-color-backdrop);
  }

  label em {
    color: var(--wp--custom--color--text-subtle);
    font-weight: normal;
  }

  input, textarea {
    width: 100%;

    &[readonly] {
      color: var(--wp--custom--color--text-subtle);
      font-style: italic;
      cursor: default;
      outline: none !important;
    }
  }

  .wp-element-button.secondary {
    background-color: var(--wp--custom--color--action-secondary);
    color: var(--wp--custom--color--action-secondary-text);
    
    &:hover {
      background-color: var(--wp--custom--color--action-secondary-hover);
    }

    &:active {
      background-color: var(--wp--custom--color--action-secondary-active);
    }
  }

  .snb-fortrydelsesknap-close {
    background-color: var(--wp--custom--color--action-secondary);
    border: none;
    border-radius: var(--wp--custom--border-radius--button);
    color: var(--wp--custom--color--action-secondary-text);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    transition: all var(--transition-duration) var(--transition-easing);
    
    &:hover {
      background-color: var(--wp--custom--color--action-secondary-hover);
    }

    &:active {
      background-color: var(--wp--custom--color--action-secondary-active);
    }
  }

  .snb-form-field.checkbox {
    align-items: center;

    label {
      margin-bottom: 0;
    }
    input {
      border: 1px solid var(--wp--custom--color--line-strong) !important;
      margin: 0 !important;
    }
  }

  .snb-form-field:not(:last-of-type) {
    margin-bottom: 1rem;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .snb-fortrydelsesknap-form-fields {
    margin-top: var(--wp--custom--spacing--default--block-start);
    margin-bottom: var(--wp--custom--spacing--default--block-end);
  }

  footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .submit-status {
    margin-block: var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--sm);
    background-color: var(--wp--custom--state-color--danger--600);
    color: var(--wp--custom--state-color--danger--50);

    &.hidden {
      display: none;
    }
  }
}