/* ==========================================================================
 * Completion Box
 * ========================================================================== */

.mds-c-completion-box {
  --mds-v-completion-box__status-color: var(--mds-t-color--primary);

  text-align: center;
  width: 100%;

  &--theme-primary {
    --mds-v-completion-box__status-color: var(--mds-t-color--neutral-intense);
    --mds-v-completion-box__icon-color: var(
      --mds-t-text-color--inverse-primary
    );
  }

  &--theme-secondary {
    --mds-v-completion-box__status-color: var(--mds-t-color--neutral);
    --mds-v-completion-box__icon-color: #fff;
  }

  &--theme-tertiary {
    --mds-v-completion-box__status-color: var(--mds-t-color--neutral-muted);
    --mds-v-completion-box__icon-color: var(--mds-t-text-color--primary);
  }

  @each $color in (blue, green, pink, purple, orange, red, yellow) {
    &--theme-$(color) {
      --mds-v-completion-box__status-color: var(--mds-t-color--$(color));
      --mds-v-completion-box__icon-color: #fff;
    }
  }

  .mds-c-completion-box__icon {
    align-items: center;
    background-color: var(--mds-v-completion-box__status-color);
    border-radius: 50%;
    color: var(--mds-v-completion-box__icon-color);
    display: flex;
    font-size: var(--mds-d-font-size--xxl);
    height: 3rem;
    justify-content: center;
    margin-bottom: var(--mds-d-spacing--lg);
    margin-left: auto;
    margin-right: auto;

    /* Match transition of parent Well bottom-border */
    transition: background-color 0.15s ease-out;
    width: 3rem;
  }

  &__img {
    height: 5rem;
    margin-bottom: var(--mds-d-spacing--lg);
  }

  &__title {
    @mixin mds-m-heading--size-lg;

    overflow-wrap: break-word;

    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--xs);
    }
  }

  &__description {
    @mixin mds-m-text--size-med;

    color: var(--mds-t-text-color--tertiary);
  }

  &__well {
    border-top: 1px solid var(--mds-t-border-color--secondary);
    margin-top: var(--mds-d-spacing--xl);
  }

  &__avatar {
    display: flex;
    padding-right: var(--mds-d-spacing--sm);
    padding-top: var(--mds-d-spacing--lg);
    text-align: left;
  }

  &__username {
    padding-left: var(--mds-d-spacing--sm);
    padding-top: var(--mds-d-spacing--xxs);
    text-align: left;
  }

  &__content {
    background-color: var(--mds-t-background-color--tertiary);
    border-radius: var(--mds-d-border-radius--default);
    margin-left: var(--mds-d-spacing--xxl);
    margin-top: var(--mds-d-spacing--sm);
    padding: var(--mds-d-spacing--sm);
  }
}