// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.comment-editor {
  @_top: comment-editor;
  @_avatar: 50px;
  @_avatar-margin: 10px;
  @_spacing: 10px;
  @_border-radius: @border-radius-large;

  --bg: hsl(var(--hsl-b3));
  border-radius: @_border-radius;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;

  &--fancy {
    @media @desktop {
      margin-left: (@_avatar + @_avatar-margin);
    }
  }

  &__avatar {
    position: absolute;
    width: @_avatar;
    height: @_avatar;
    right: 100%;
    margin-right: @_avatar-margin;
    display: none;

    @media @desktop {
      display: block;
    }
  }

  &__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0 (@_spacing - 2px);
    border-radius: 0 0 @_border-radius @_border-radius;
  }

  &__footer-item {
    font-size: @font-size--normal;
    flex: none;
    margin: 5px 2px;
    color: white;

    &--notice {
      align-self: center;
      flex: 1;
    }
  }

  &__message {
    .reset-input();
    .content-font();

    min-height: 3em;
    padding: @_spacing;
    font-size: @font-size--phone-input;
    border-radius: @_border-radius @_border-radius 0 0;
    border: 2px solid var(--bg);
    border-bottom: none;
    background-color: @osu-colour-b5;
    resize: none;

    @media @desktop {
      font-size: inherit;
    }

    &::placeholder {
      color: @osu-colour-f1;
    }
  }
}