// ------------------------------
// edX Pattern Library: Helpers

// About: Sass partial for defining extends and re-usable patterns at the Sass compile level.

// #UTILITIES
// #RESETS

// ----------------------------
// #UTILITIES
// ----------------------------
// visual disabled
%state-disabled {
    pointer-events: none;
    outline: none;
    cursor: not-allowed;
}

// presentational wrapper
%wrapper {
    @include clearfix();
    width: 100%;
}

// remove spacing from first/last children
%clear-first-child {

    &:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

%clear-last-child {

    &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
}

%text-wrap {
    @include word-wrap(break-word);
    @include hyphens(auto);
}

%text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// accessibility
%a11y-hide {
    // clip has been deprecated but is still supported
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    margin: -1px;
    height: 1px;
    width: 1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    // ensure there are spaces in sr text
    word-wrap: normal;
}

%a11y-hide-image-text {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

%a11y-ensure-contrast {
    background: $black !important; // a11y: Ensuring that color contrast is high for legibility
    color: $white !important; // a11y: Ensuring that color contrast is high for legibility
}

// ----------------------------
// #UTILITIES
// ----------------------------
// reset of lists
%reset-lists {
    margin: 0;
    padding: 0;
    list-style: none;
    text-indent: 0;
}

%list-unstyled {
    @extend %reset-lists;

    li,
    dt,
    dd {
        margin: 0;
        padding: 0;
    }
}

%list-inline {
    @extend %list-unstyled;

    li,
    dt,
    dd {
        display: inline-block;
    }
}

// reset of code
%reset-code {
    font-family: $font-family-monospace;
    font-size: font-size(base);
    line-height: line-height(x-large);
    color: $text-base-color;
}

// links: base
%link {
    @include transition(
        color timing(xx-fast) ease-in-out 0s
    );

    color: $link-color;
    text-decoration: none;

    // STATE: hover, active, focus
    &:hover,
    &:active,
    &:focus {
        color: $link-focus-color;
        text-decoration: underline;
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        display: none;
        color: palette(grayscale, base);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        color: $link-focus-color;
    }
}

// links: text-based
%link-text {
    @extend %link;
    @include transition(
        box-shadow timing(xx-fast) ease-in-out 0s
    );

    box-shadow: 0 1px 0 0 $transparent;
}

// align text
%text-left {
    @include text-align(left);
}

%text-center {
    @include text-align(center);
}

%text-right {
    @include text-align(right);
}