@import '../config/import';

.profile-header {
  --padding: var(--su-3);

  @media (min-width: $breakpoint-s) {
    --padding: var(--su-4);
  }

  @media (min-width: $breakpoint-m) {
    text-align: center;
  }

  @media (min-width: $breakpoint-l) {
    --padding: var(--su-6);
  }

  &__top {
    margin-top: calc(-1 * var(--su-7));
    margin-bottom: var(--su-4);
    position: relative;
    padding: 0 var(--padding);

    @media (min-width: $breakpoint-m) {
      margin-top: calc(-1 * var(--su-9));
      margin-bottom: var(--su-3);
    }
  }

  &__actions {
    display: flex;
    right: 0;
    top: var(--su-7);
    position: absolute;
    left: 0;
    justify-content: flex-end;
    padding: var(--padding) var(--padding) 0 0;

    @media (min-width: $breakpoint-m) {
      top: var(--su-9);
    }
  }

  &__details {
    padding: var(--padding);
  }

  &__bio {
    white-space: pre-wrap;
  }

  &__meta {
    font-size: var(--fs-s);
    color: var(--base-60);
    margin-bottom: var(--su-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: calc(-1 * var(--su-1));

    @media (min-width: $breakpoint-m) {
      justify-content: center;
      margin-left: 0;
    }

    a {
      color: var(--link-color-secondary);

      &:hover {
        color: var(--link-color-hover);
      }
    }

    &__item {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      white-space: nowrap;
      padding: var(--su-2) var(--su-2);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;

      & > span {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @media (min-width: $breakpoint-m) {
        padding: var(--su-1) var(--su-3);
      }
    }
  }

  &__bottom {
    border-top: 1px solid var(--base-10);
    padding: calc(var(--padding) / 2);
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;

    @media (min-width: $breakpoint-s) {
      flex-flow: row;
    }

    .crayons-definition {
      padding: calc(var(--padding) / 2);
    }
  }

  .crayons-avatar,
  .crayons-logo {
    width: var(--su-9);
    height: var(--su-9);
    background-color: var(--profile-brand-color);
    padding: var(--su-1);

    &::after {
      content: none;
    }

    @media (min-width: $breakpoint-m) {
      padding: var(--su-2);
      width: var(--su-10);
      height: var(--su-10);
    }
  }
}

.crayons-definition {
  font-size: inherit;

  &__title {
    font-size: 85%;
    font-weight: var(--fw-medium);
    color: var(--base-60);
    display: block;
  }
}

.brand-bg {
  background: linear-gradient(
    180deg,
    var(--profile-brand-color) var(--su-9),
    transparent var(--su-9)
  );

  @media (min-width: $breakpoint-m) {
    background: linear-gradient(
      180deg,
      var(--profile-brand-color) var(--su-10),
      transparent var(--su-10)
    );
  }
}

.profile-comment-card {
  border-radius: 0;

  @media screen and (min-width: $breakpoint-s) {
    border-radius: var(--radius);
  }
}

.profile-comment-row {
  color: var(--base-90);
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--card-border);
  padding: var(--su-3) var(--su-4);

  &:hover,
  &:focus,
  &:active {
    background-color: var(--card-secondary-border);
  }

  &:last-child {
    border-bottom: unset;
  }
}

.badge-indicator {
  font-size: var(--fs-s);
  color: var(--base-0);
  width: var(--su-6);
  height: var(--su-6);
  line-height: var(--su-6);
  position: absolute;
  background-color: var(--accent-brand);
  right: var(--su-1);
  bottom: -5px;
  border-radius: 100%;
}