@use "core/functions" as *;
@use "border-radius" as *;
@use "media" as *;

/// Shared styles for link guard content blocks.
/// Keep this as the single source of truth for both link page card and guard dialog body.
@mixin link-guard-content {
  padding: 1.5rem;
  border: 1px solid fi-var(global-border-color-light);
  background: light-dark(#fff, #1d2230);
  box-shadow: 0 1rem 2rem light-dark(rgba(15, 23, 42, 0.18), rgba(0, 0, 0, 0.35));
  @include border-radius(1rem);

  .title {
    margin-block: 0 0.75rem;
    font-size: 1.25rem;
  }

  .message {
    font-weight: 600;
    margin-block: 0 0.75rem;
  }

  .target-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }

  .target {
    margin: 0;
    padding: 0.5rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
    background: light-dark(#f8fafc, #171b25);
    border: 1px solid fi-var(global-border-color);
    font-family: fi-var(code-font-family);
    font-size: 0.875rem;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: all;
    @include border-radius;
  }

  .copy-icon-btn {
    flex-shrink: 0;
    background: light-dark(#f8fafc, #171b25);
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .cancel-btn,
  .confirm-btn {
    padding: 0.5rem 0.875rem;
    border: 1px solid fi-var(global-border-color-light);
    background: light-dark(#f6f8fa, #2a313c);
    color: fi-var(global-font-color);
    user-select: none;
    @include border-radius;
  }

  .confirm-btn {
    color: #fff;
    background-color: fi-var(primary);
    border-color: fi-var(primary);
  }

  @include media('xs') {
    padding: 1rem;

    .cancel-btn,
    .confirm-btn {
      flex: 1 1 50%;
    }
  }
}
