// ------------------------------------------------
// 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: $f-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;
    }
}
