@import 'colors';
@import 'fonts';
@import 'mixins';

#forum {

  .container {
    max-width: 750px;
  }

  .forum-topics-table {
    @include sheet;
    @include shadow-light;

    th, td {
      padding: 0 16px;
      vertical-align: middle;
      border: 0;

      &:first-child {
        padding-left: 24px;
      }

      &:last-child {
        padding-right: 24px;
      }
    }

    thead {
      th {
        color: $grey;
        line-height: 64px;
        border-bottom: $border;
      }

      .icon {
        width: 48px;
      }

      .title-with-author {
        padding-left: 0;
      }

      .count {
      }

      .activity {
      }
    }

    tbody {

      td {
        color: $darkGrey;
        cursor: pointer;
        line-height: 64px;
        transition: bezier(background-color);
      }

      .icon {
        border-bottom: 0;
        .avatar {
          border-radius: 24px;
        }
      }

      .title-with-author {
        line-height: 20px;
        width: 80%;
        padding-left: 0;
      }

      .title {
        font-weight: bold;
      }



      .original {}

      .count {
        text-align: center;
      }

      .activity {
        white-space: nowrap;
      }

      tr:last-child td {
        border-bottom: none;
      }

      tr:hover td {
        background-color: #F3F3F3;
      }

    } 
  }

  .forum-topic-posts {
    @include sheet;
    @include shadow-light;
  }

  .forum-post {
    border-bottom: $border;

    .post-meta {
      padding: 24px;
      padding-bottom: 0;
      color: $grey;

      .player-avatar {
        float: left;
        font-weight: bold;
      }

      .time {
        float: right;
        line-height: 32px;
      }

      @include clearfix;
    }

    .post-content {
      padding: 24px;
      color: $darkGrey;
    }

    &:last-child {
      border-bottom: 0;
      padding-bottom: 16px;
    }
  }

  .toggle-new-post {
    margin: 0 auto;
    margin-top: -24px;

    &.active {
    }
  }

  .form-sheet {
    $border: 1px solid #ddd;
    @include sheet;
    @include shadow-light;

    .form-header {
      padding: 16px 16px 16px 24px;
      border-bottom: $border;
      background-color: $whiteSmoke;
      @include clearfix;

      .cancel-new-post {
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        line-height: 24px;
        height: 24px;
        float: right;

        &:hover {
          color: $darkGrey;
        }
      }

      h3 {
        display: inline-block;
        font-family: $regular;
        font-weight: bold;
        margin: 0;
        vertical-align: top;
        line-height: 24px;
      }

    }

    .form-group {
      clear: both;
      padding: 0;
      margin-bottom: 0;

      .form-control {
        padding: 16px 24px 17px 24px;
        border-bottom: $border;

        &:focus {
          border-color: $mainBlue;
          border-width: 2px;
          padding-bottom: 16px;
        }
      }
    }

    .form-actions {
      margin: 0;

      .btn-flat {
        width: 100%;
        display: block;
        line-height: 48px;
      }
    }
    
    trix-toolbar {
      background-color: $whiteSmoke;
      height: 49px;
      border-bottom: $border;

      .button_groups {
        .button_group {
          height: 48px;
          border-right: $border;
          display: block;
          float: left;
        }

        button {
          display: block;
          float: left;
          position: relative;
          overflow: hidden;
          white-space: nowrap;
          width: 48px;
          height: 48px;
          padding: 0;
          border: 0;
          background-color: $whiteSmoke;
          color: transparent;

          &:hover {
            background-color: white;
          }

          &::before {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 24px;
            height: 24px;
            color: $grey;
            @include icon;
            transition: bezier(all);
          }

          &.active {
            background-color: #eee;

            &::before {
              color: $darkGrey;
            }
          }
        }

        .bold::before {
          content: 'format_bold';
        }

        .italic::before {
          content: 'format_italic';
        }

        .strike::before {
          content: 'format_strikethrough';
        }

        .link::before {
          content: 'insert_link';
        }

        .quote::before {
          content: 'format_quote';
        }

        .code::before {
          content: 'functions';
        }

        .bullets::before {
          content: 'format_list_bulleted';
        }

        .numbers::before {
          content: 'format_list_numbered';
        }

        .decrease::before {
          content: 'format_indent_decrease';
        }

        .increase::before {
          content: 'format_indent_increase';
        }

        .undo::before {
          content: 'undo';
        }

        .redo::before {
          content: 'redo';
        }
      }
    }

    trix-editor {
      min-height: 240px;
      padding: 16px 24px 17px 24px;
      outline: none;
      border: 0;
      border-bottom: $border;
      transition: bezier(all);

      &:focus {
        border-color: $mainBlue;
        border-width: 2px;
        padding-bottom: 16px;
      }
    }
  }

  .forum-topic-posts + .form-sheet {
    margin-top: 24px;
  }
}
