lila/ui/bits/css/streamer/_form.scss

@mixin mq-at-least-picture {
  @media (min-width: at-least($large)) {
    @content;
  }
}

@import 'header';

.streamer-edit {
  .streamer-header {
    flex-direction: column;
    padding: 2em 2em 0;
    row-gap: 2em;

    @include mq-at-least-picture {
      flex-direction: row;
    }

    .picture-edit {
      @extend %flex-column;

      row-gap: 2em;

      > span {
        @extend %flex-center-center;

        column-gap: 1em;
      }
    }

    .picture {
      align-self: center;
      width: min(350px, calc(100vw - 4em));
      height: min(350px, calc(100vw - 4em));
    }
  }

  .twitch-link-box,
  .youtube-link-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;

    &.linked button.link {
      display: none;
    }

    &:not(.linked) button.unlink {
      display: none;
    }
  }

  .status {
    @extend %box-radius;

    padding: 1em 1.5em;
    margin-bottom: 2em;
    background: $c-bg-zebra;

    &::before {
      font-size: 2em;
      margin-inline-end: 0.4em;
    }

    form {
      display: inline;
    }
  }

  .mod {
    margin-bottom: 6em;
  }

  .mod_log {
    @extend %break-word;
  }

  #site_header a.preview {
    display: block;
    margin-top: 40px;
    text-align: center;
  }
}

.streamer-rules li {
  margin: 0.9em 0 0.9em 2.2em;
  line-height: 1.6em;
  text-indent: -2.2em;

  &::before {
    font-family: lichess;
    content: $licon-Checkmark;
    font-size: 1.5em;
    margin-inline-end: 0.5em;
    vertical-align: middle;
    opacity: 0.8;
  }
}

.streamer-picture {
  form {
    padding: 30px;
    border-top: $border;
    text-align: center;
  }

  .cancel {
    padding: 40px;
    border-top: $border;
  }

  .forms > *:first-child {
    margin-top: 40px;
  }

  .picture_wrap {
    text-align: center;
  }
}