@use "lib/viewport";

// Policy in post styles
.cooked .policy {
  position: relative;
  border: 1px solid var(--primary-low);

  .policy-body {
    padding: 0.75em;
    margin-bottom: 2em;
  }

  .policy-footer {
    border-top: 1px solid var(--primary-low);
    padding: 0.75em;
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    @include viewport.until(md) {
      flex-direction: column;
    }
  }

  .toggle {
    display: flex;
    align-items: center;

    &.toggle-accepted {
      color: var(--success);
    }

    &.toggle-not-accepted {
      color: var(--primary-medium);
    }

    .user-count {
      display: flex;
      align-items: center;
      margin-right: 0.25em;
    }

    .d-icon {
      line-height: var(--line-height-large);
    }
  }

  .no-possible-users {
    color: var(--danger);
    font-size: var(--font-down-1);
  }

  .user-lists {
    display: flex;
    font-size: var(--font-up-1);
    gap: 0.5rem;
    justify-content: end;

    .users {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .avatar {
        margin: 1px;
      }
    }
  }

  .separator {
    border-right: 2px solid var(--primary-low);
  }

  .see-policy-settings-btn,
  .edit-policy-settings-btn {
    position: absolute;
    top: 0.25em;
    right: 0.25em;
    background: none;
    padding: 0.5em;

    &:hover {
      color: var(--primary-very-low);
      background: var(--primary-medium);
    }
  }

  .load-more-users {
    color: var(--primary-medium);
    margin-left: 0.25em;
  }

  .policy-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

    @include viewport.until(lg) {
      width: 100%;
    }

    .btn {
      white-space: nowrap;

      @include viewport.until(lg) {
        width: 100%;
        white-space: inherit;
      }
    }
  }

  .policy-settings {
    display: none; // JS override kicks in when needed.
    border-top: 1px solid var(--primary-low);
    padding: 0.75em;
    flex-direction: column;

    .visible-settings {
      color: var(--primary-medium);
    }

    .save-policy-settings-btn {
      margin-left: auto;
    }
  }

  .settings-list {
    display: flex;
    flex-direction: column;

    .setting {
      display: flex;
      align-items: center;
      margin-bottom: 0.75em;
    }

    .policy-setting-name {
      flex: 1;
    }

    .policy-setting-value {
      flex: 4;
      margin-bottom: 0;
    }
  }
}

// Policy in editor styles
.d-editor-preview .policy {
  padding: 0.5em;
  border: 1px solid var(--primary-low);

  .policy-preview {
    font-size: var(--font-up-1);
    font-weight: 700;
  }
}
