@use "_variables" as *;
@use "_mixins" as *;
@use "_form-mixins" as *;

.results-container {
  min-height: 40vh;
}

input[type="text"] {
  @include peertube-input-text(300px);
}

.channel {
  margin-bottom: 1.25rem;
  border-bottom: 1px solid pvar(--input-border-color);
  min-height: 130px;
}

.channel-info {
  display: flex;
  gap: 1rem;
}

.metadata {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  min-width: 1px;
}

.video-channel-names {
  width: fit-content;
  display: flex;
  align-items: baseline;
  color: pvar(--fg);

  @include disable-default-a-behaviour;
}

.display-name {
  font-weight: $font-semibold;

  @include font-size(18px);
}

.handle,
.followers,
.videos-info {
  @include font-size(14px);
}

.handle {
  color: pvar(--fg-300);
  margin-bottom: 0.5rem;
}

.followers {
  color: pvar(--fg);
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  @include margin-left(auto);
}

.chart-container {
  // Sync these values with the template
  width: 40vw;
  height: 100px;
}

@media screen and (max-width: $small-view) {
  .channel-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1rem;
    align-items: center;
  }

  .metadata {
    align-self: normal;
    align-items: center;
  }

  .buttons {
    text-align: center;

    @include margin-left(0);
  }
}
