// ------------------------------------------------
// Styling for non-Pattern Library discussion pages
// ------------------------------------------------

// Note: replace with globals from common/static/sass/edx-pattern-library-shims when available
%pattern-library-btn {
  @include transition(
    color 0.125s ease-in-out 0s,
    border-color 0.125s ease-in-out 0s,
        background 0.125s ease-in-out 0s,
        box-shadow 0.125s ease-in-out 0s
   );

  display: inline-block;
  border: 1px solid $forum-color-active-thread;
  border-radius: 3px;
  margin: 0;
  background-image: none;
  box-shadow: none;
  height: 40px;
  text-shadow: none;
  font-family: $font-family-sans-serif; // without this, it would fallback to lms button tag style
  font-size: 14px;
  font-weight: 600;
  word-wrap: break-word;
  white-space: nowrap;

  // Display: block, one button per line, full width
  &.block {
    display: block;
    width: 100%;
  }

  // STATE: is disabled
  &:disabled,
  &.is-disabled {
    pointer-events: none;
    outline: none;
    cursor: not-allowed;
  }

  &:hover,
  &:active,
  &:focus {
    // Note:these rules all need !important in order to beat out
    // the base button styling defined in the courseware.
    border-color: $forum-color-hover !important;
    background-color: $forum-color-hover !important;
    background-image: none !important;
    box-shadow: none !important;
    color: $forum-color-active-text !important;
    text-decoration: none !important;  // Don't show underlines on links that are styled as buttons
  }
}

// Use pattern library buttons for discussion components
.discussion-module, .wmd-prompt-dialog {
  .btn {
    @extend %pattern-library-btn;

    background-color: $forum-color-background;
    color: $forum-color-active-thread;
  }

  .btn-brand {
    @extend %pattern-library-btn;

    background-color: $forum-color-active-thread;
    color: $forum-color-active-text;
  }
}

// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
  .discussion {
    clear: both;
  }
}
