// Utility classes
.muted {
  color: var(--color-text-maxcontrast);
  opacity: 0.7;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

.ml-8 {
  margin-left: 8px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-button__text {
  cursor: pointer;
}

// Attachment BBCode styles
.attachment {
  margin: 12px 0;
  max-width: 100%;

  &-error {
    display: inline-block;
    padding: 8px 12px;
    background: var(--color-error);
    color: var(--color-primary-element-text);
    border-radius: 6px;
    font-size: 0.9rem;
  }

  &-image {
    display: inline-block;
    max-width: 100%;

    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      border: 1px solid var(--color-border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }

  &-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-background-hover);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    max-width: 400px;

    &:hover {
      background: var(--color-background-dark);
    }
  }

  &-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;

    &.icon-image {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
    }

    &.icon-video {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
    }

    &.icon-audio {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z'/%3E%3C/svg%3E");
    }

    &.icon-pdf {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f44336' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
    }

    &.icon-document {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232196f3' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
    }

    &.icon-spreadsheet {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234caf50' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-2 16H8v-2h4v2zm0-4H8v-2h4v2zm0-4H8V8h4v2zm4 8h-4v-2h4v2zm0-4h-4v-2h4v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
    }

    &.icon-archive {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9800' d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/%3E%3C/svg%3E");
    }

    &.icon-file {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
    }
  }

  &-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &-name {
    font-weight: 500;
    color: var(--color-main-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover {
      text-decoration: underline;
    }
  }

  &-size {
    font-size: 0.85rem;
    color: var(--color-text-maxcontrast);
  }
}

.dialog__actions {
  gap: 12px !important;
}

// User mention bubble styles
.mention-bubble {
  text-decoration: none;
  white-space: nowrap;

  &__wrapper {
    position: relative;
    max-width: 150px;
    height: 18px;
    vertical-align: text-bottom;
    display: inline-flex;
    align-items: center;
  }

  &__content {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    max-width: 100%;
    height: 20px;
    user-select: none;
    padding-inline: 2px 6px;
    border-radius: 10px;
    background-color: var(--color-background-dark);
  }

  &__icon {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: var(--color-background-darker);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    // Default to light theme avatar
    background-image: var(--avatar-light);
  }

  &__name {
    overflow: hidden;
    margin-inline-start: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-main-text);
    font-size: 0.9em;
  }

  &:hover {
    .mention-bubble__content {
      background-color: var(--color-background-darker);
    }
  }
}

// Dark theme avatar - use --avatar-dark when parent has data-forum-dark="true"
[data-forum-dark='true'] .mention-bubble__icon {
  background-image: var(--avatar-dark);
}
