@mixin ap-description-text {
  color: var(--primary-medium);
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: var(--font-down-1);
  line-height: var(--line-height-large);
}

div.activity-pub-actor-status {
  padding: 2px 8px;
  border-radius: var(--d-border-radius);
  line-height: 0.9em;
  min-height: 23px;
  background-color: var(--primary-200);
  display: inline-flex;
  align-items: center;

  > .svg-icon {
    height: 1.2em;
    width: 1.2em;
    color: var(--danger) !important;
  }

  &.active > .svg-icon {
    color: var(--success) !important;
  }

  &.publishing-disabled > .svg-icon {
    color: var(--tertiary) !important;
  }

  .label {
    margin-left: 0.5em;
  }

  .clickable {
    cursor: pointer;
  }
}

section.activity-pub-actor-setting {
  margin-top: 1em;

  &:first-of-type {
    margin-top: 0;
  }

  input {
    margin-bottom: 0;
  }

  .activity-pub-actor-setting-description {
    @include ap-description-text;
  }

  .activity-pub-actor-setting-notice {
    margin-top: 4px;
    margin-bottom: 10px;
    flex: 1 1 100%;

    span {
      display: inline-flex;
      gap: 0.25em;
      align-items: center;
      font-size: var(--font-down-1);
      padding: 0.25em;
      background-color: var(--highlight-low);
    }
  }

  .activity-pub-handle {
    display: inline-flex;
    margin: 4px 0;
  }
}

.activity-pub-enabled .activity-pub-actor-setting-description {
  display: flex;
  flex-direction: column;
}

.activity-pub-site-setting {
  margin-bottom: 1em;

  span {
    @include ap-description-text;
  }
}

.activity-pub-site-setting-title {
  font-weight: bold;
  color: var(--primary-high);
  margin-bottom: 0.5em;
}

.activity-pub-site-setting-label {
  margin-bottom: 5px;

  a {
    color: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--primary-low);
    padding: 0.25em 0.5em;
  }
}

#activity-pub-username {
  width: min(250px, 90%);
}

.activity-pub-handle {
  overflow: hidden;

  .activity-pub-handle-contents {
    display: flex;
    align-items: stretch;
    border-radius: var(--d-border-radius);
    border: 1px solid var(--primary-low);
    line-height: 35px;
    overflow: hidden;
  }

  .handle {
    padding: 0 0.65em;
    color: var(--primary-high);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .btn {
    border: unset;
  }
}

.activity-pub-handle-description {
  @include ap-description-text;
}

.activity-pub-discovery-dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em;
  z-index: 100;
  background-color: var(--secondary);
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--primary-low);
  max-width: 90vw;
  box-sizing: border-box;

  span {
    white-space: normal;
  }
}

#reply-control .activity-pub-actor-status {
  margin-left: 1em;
}

.activity-pub-topic-status,
.activity-pub-post-status {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;

  &.published .d-icon-discourse-activity-pub,
  &.updated .d-icon-discourse-activity-pub {
    color: var(--success);
  }

  &.deleted .d-icon-discourse-activity-pub {
    color: var(--danger);
  }

  &.published-remote .d-icon-discourse-activity-pub {
    color: var(--tertiary);
  }
}

.activity-pub-post-info,
.activity-pub-topic-info {
  display: flex;
  flex-direction: column;

  span,
  a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: 35px;
  }

  button {
    height: 100%;
  }
}

.activity-pub-attributes {
  display: flex;
  gap: 0.5em;
  flex-flow: wrap;
}

.activity-pub-attribute {
  font-size: var(--font-down-1);
  background-color: var(--primary-100);
  padding: 0.15em 0.5em;
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.5em;

  &.copiable {
    cursor: pointer;
  }
}

body.user-preferences-activity-pub-page {
  .form-vertical {
    width: 100%;

    .control-group {
      margin-bottom: 1em;
    }

    .activity-pub-authorizations {
      margin-bottom: 2em;
    }
  }
}

.activity-pub-authorize {
  .controls {
    display: inline-flex;
    gap: 0.5em;
  }

  input {
    min-width: 300px;
  }
}

.activity-pub-authorize-auth-type {
  min-width: 150px;
}

.activity-pub-authorize-verified-domain {
  min-width: 300px;
  background: var(--primary-low);
  display: flex;
  align-items: center;
  gap: 0.5em;
  justify-content: space-between;
  box-sizing: border-box;

  span {
    padding: 0 0.75em;
  }
}

.activity-pub-route-nav {
  display: none !important;

  &.visible {
    display: flex !important;
  }
}

.activity-pub-banner {
  width: 100%;
  background: var(--primary-very-low);
  padding: 0.5em;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  container-type: inline-size;

  .activity-pub-banner-side {
    display: flex;
    gap: 0.5em;
  }

  .fk-d-tooltip__trigger {
    margin-left: 0.5em;
  }
}

.activity-pub-banner-text {
  .desktop {
    display: block;
  }

  .responsive {
    display: none;
  }
}

@container (max-width: 47em) {
  .activity-pub-banner-text {
    .desktop {
      display: none;
    }

    .responsive {
      display: block;
    }
  }
}

.activity-pub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.activity-pub-actor {
  display: flex;
  justify-content: flex-start;
  gap: 1em;

  .activity-pub-actor-content {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
}

.activity-pub-follow-table {
  grid-template-columns: minmax(13em, 3fr) repeat(2, 110px);

  &.show-controls {
    grid-template-columns: minmax(13em, 3fr) repeat(3, 110px);
  }
}

@container (max-width: 47em) {
  .activity-pub-follow-table-user,
  .activity-pub-follow-table-followed-at {
    display: none;
  }

  .activity-pub-follow-table-actions {
    width: 100%;
    padding: 0.5em 0.25em 1em;
    justify-content: start;
    grid-column-start: 1;
    grid-column-end: -1;

    .activity-pub-actor-unfollow-btn {
      width: 100%;
    }
  }
}

.activity-pub-follow-table-actor {
  justify-content: flex-start;
}

.activity-pub-follow-controls {
  .activity-pub-handle-label {
    margin-top: 1em;
  }

  .activity-pub-handle {
    display: inline-flex;
  }
}

.activity-pub-follow-domain-controls,
.activity-pub-actor-follow-find {
  display: flex;
}

.activity-pub-follow-domain-footer,
.activity-pub-actor-follow-find-footer {
  @include ap-description-text;
  min-height: 18px;

  &.error {
    color: var(--danger);
  }
}

.activity-pub-actor-follow-find {
  input[type="text"] {
    width: 500px;
    max-width: 100vw;
    margin-bottom: 0;
  }
}

.activity-pub-actor-follow-actor-container {
  min-height: 80px;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: var(--primary-very-low);

  &.no-actor {
    color: var(--primary-medium);
    font-size: var(--font-down-1);
    justify-content: center;
  }
}

.activity-pub-actor-follow-actor {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  @media all and (width <= 400px) {
    flex-flow: wrap;
    gap: 1em;

    .activity-pub-follow-actor-btn {
      width: 100%;
    }
  }
}

.admin-plugins.activity-pub {
  .admin-controls nav {
    .nav-pills > li.activity-pub-add-actor {
      margin-left: auto;
    }
  }
}

.activity-pub-actor-table {
  grid-template-columns: minmax(13em, 3fr) 150px 150px 230px;
}

.activity-pub-actor-table-actor {
  justify-content: flex-start;
}

.activity-pub-actor-table-actions {
  gap: 1em;
  justify-content: flex-end;

  .header-contents {
    text-align: right;
  }
}

.activity-pub-log-table {
  grid-template-columns: 120px 100px minmax(8em, 2fr) 120px;
}

.activity-pub-log-created-at {
  justify-content: flex-start;
}

.activity-pub-json-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-pub-json-modal-buttons {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.activity-pub-json-display {
  max-width: 100%;
  max-height: 400px;
  font-size: 0.8em;
  background-color: var(--primary-100);
  padding: 0.5em;
  overflow: scroll;
}

.activity-pub-actor-title,
.activity-pub-log-title {
  align-items: center;
  gap: 1em;
  margin-top: 1em;
}

.activity-pub-actor-header {
  display: flex;
  align-items: center;
  gap: 1em;

  .activity-pub-actor-model,
  .activity-pub-actor-status {
    min-height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .activity-pub-actor-model {
    border: 1px solid var(--primary-medium);
    font-size: var(--font-up-1);
    padding: 0 0.5em;
  }

  .activity-pub-actor-status {
    padding: 0 0.7em;
  }

  .activity-pub-actor-enabled-toggle {
    margin-left: auto;

    .d-toggle-switch--label {
      margin: 0;
      order: 1;
    }
  }
}

.activity-pub-actor-save-response,
.activity-pub-json-copy-status {
  &.success {
    color: var(--success);
  }

  &.failed {
    color: var(--danger);
  }
}

.activity-pub-enable-actor {
  gap: 0.5em;

  input {
    margin: 0;
  }
}

.activity-pub-new-actor-model {
  display: flex;
  align-items: center;
  gap: 1em;
}

.activity-pub-actor-subtitle {
  margin-top: 1em;
}

.activity-pub-actor-form-container {
  margin-top: 1em;
  display: flex;
  flex-flow: wrap;
}

.activity-pub-actor-form,
.activity-pub-actor-form-extra {
  width: 50%;
  min-width: 400px;
}

.activity-pub-actor-gutter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
}

.select-kit.multi-select.activity-pub-tag-chooser,
.select-kit.combo-box.activity-pub-category-chooser {
  width: 300px;

  .select-kit-header {
    color: var(--primary-high);
  }
}

.d-modal {
  .activity-pub-topic-status,
  .activity-pub-post-status {
    cursor: unset;
  }
}

.activity-pub-topic-actions,
.activity-pub-post-actions {
  display: flex;
  flex-direction: column;
  gap: 1em;

  .action {
    display: flex;
    gap: 0.75em;
    width: 100%;
    align-items: center;

    .action-button {
      .d-button-label {
        white-space: nowrap;
      }
    }

    .action-description {
      font-size: var(--font-down-1);
    }
  }
}

.topic-map__activity-pub {
  margin-top: 1em;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  color: var(--primary-700);

  > .activity-pub-topic-status {
    font-size: var(--font-down-1);
  }
}

.activity-pub-topic-modal {
  .control-group {
    .controls + .controls {
      margin-top: 9px;
    }
  }

  .control-group:not(:last-child) {
    margin-bottom: 1.3em;
  }
}

.activity-pub-admin-info-actors {
  display: flex;
  gap: 0.75em;

  .handle {
    color: var(--primary-700);
  }
}

.activity-pub-about {
  > p {
    max-width: 700px;
  }

  .activity-pub-actors {
    margin-top: 2em;
  }

  .activity-pub-actors-list {
    display: flex;
    flex-flow: wrap;
    gap: 2em;
  }

  .activity-pub-actor-card {
    flex: 1;
  }
}

.activity-pub-actor-card {
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  padding: 1em;
  border: 1px solid var(--primary-200);
  max-width: 450px;
  box-sizing: border-box;

  .activity-pub-actor-card-top,
  .activity-pub-actor-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
  }

  .activity-pub-actor-metadata,
  .activity-pub-handle,
  .activity-pub-follow-btn {
    font-size: var(--font-down-1);
  }
}
