@use '_variables' as *;
@use '_mixins' as *;
@use '_account-channel-page' as *;
@use '_miniature' as *;
@use '_button-mixins' as *;

$owner-block-bg: pvar(--bg-secondary-350);

.root {
  --co-channel-img-margin: 30px;
  --co-font-size: 16px;
  --co-channel-handle-font-size: 16px;
  --co-owner-handle-font-size: 14px;
}

.actor-info {
  min-width: 1px;
  width: 100%;
  align-items: flex-start;

  > h4,
  > .actor-handle {
    @include ellipsis;
  }
}

.channel-info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;

  font-size: var(--co-font-size);

  @include margin-bottom(3rem);
}

.channel-avatar-row {
  @include avatar-row-responsive(var(--co-channel-img-margin), var(--co-channel-handle-font-size));
  display: flex;
    flex-direction: column;
    align-items: center
}

.channel-description {
  grid-column: 1;
  word-break: break-word;
}

.show-more {
  display: none;

  @include show-more-description;
}

.channel-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  &.right {
    @include margin-left(3rem);
  }

  // Only used on small screen
  &.bottom {
    justify-content: center;
    display: none;

    @include margin-bottom(2rem);
  }
}

.owner-card {
  grid-column: 2;
  // Takes all the column
  grid-row: 1 / 3;
  place-self: end;

  @include margin-left(105px);
}

// Only used on mobile
.bottom-owner {
  display: none;
}

.owner-block {
  background-color: $owner-block-bg;
  padding: 30px;
  width: 300px;
  font-size: var(--co-font-size);
  border-radius: 5px;

  .avatar-row {
    display: flex;
    margin-bottom: 15px;

    .actor-info {
      @include margin-left(15px);
    }

    h4 {
      font-size: 18px;
      margin: 0;

      a {
        color: pvar(--fg);
      }
    }

    .actor-handle {
      font-size: var(--co-owner-handle-font-size);
      color: pvar(--fg-300);
    }
  }

  .owner-description {
    max-height: 140px;
    word-break: break-word;

    @include fade-text(120px, $owner-block-bg);
  }
}

.view-account.complete {
  display: none;
}

my-copy-button {
  @include margin-left(3px);
}

@media screen and (max-width: 1400px) {
  // Takes all the row width
  .channel-avatar-row {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .owner-card {
    grid-row: 2;

    @include margin-left(60px);
  }
}

@media screen and (max-width: 1100px) {
  .root {
    --co-channel-img-margin: 15px;
  }

  .channel-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    align-items: center;
  }

  .channel-description:not(.expanded) {
    max-height: 70px;

    @include fade-text(30px, pvar(--bg));
  }

  .show-more {
    display: inline-block;
  }

  .channel-buttons {
    &.right {
      display: none;
    }

    &.bottom {
      display: flex;
    }
  }

  .owner-card {
    display: none;
  }

  .bottom-owner {
    display: block;
    border-bottom: 2px solid $separator-border-color;
    margin-bottom: 60px;
  }

  .owner-block {
    display: grid;
    width: 100%;
    padding: 1rem;

    .avatar-row {
      grid-column: 1;

      @include margin-right(30px);
    }

    .owner-description {
      grid-column: 2;
      max-height: 70px;

      @include fade-text(30px, $owner-block-bg);
    }

    .view-account {
      grid-column: 2;
    }
  }

  .view-account.complete {
    display: block;
    text-align: end;
    margin-top: 10px;
  }

  .view-account.short {
    display: none;
  }
}

.actor-info.centered-header {
  display: flex;
  justify-content: center;
  text-align: center;

  .header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.channel-description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}


@media screen and (max-width: $mobile-view) {
  .root {
    --co-font-size: 14px;
    --co-channel-handle-font-size: 13px;
    --co-owner-handle-font-size: 13px;
  }

  .links {
    margin: auto !important;
    width: min-content;
  }

  .bottom-owner {
    padding: 15px;
    margin-bottom: 30px;

    .section-label {
      display: none;
    }
  }

  .owner-block {
    display: block;

    .avatar-row {
      display: flex;
      flex-direction: row-reverse;
      margin: 0;

      h4 {
        font-size: 16px;
      }

      .actor-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: -5px;
      }

      .account-avatar {
        // Resized to 64px by JS component
        margin: -30px 0 0 15px;
      }
    }

    .owner-description {
      display: none;
    }
  }
}

