@import '../../../helpers/_functions';
@import '../../../helpers/_size';

/* UTILS */
/* Utility classes to help solve some very annoying issues */

$pull-directions: (left, right);
@include generate-classes-for-viewport($pull-directions, 'float', delimitize('pull'), $generate-viewports: #{get-viewport-flag('FLOAT')});

$text-directions: (justify, left, right, center);
@include generate-classes-for-viewport($text-directions, 'text-align', delimitize('text'), $generate-viewports: #{get-viewport-flag('TEXT')});

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

.u-text-break {
    hyphens: auto;
    word-break: break-word;
    word-wrap: break-word;
}

/* Center element - best used for hero bodies or text */
.u-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    flex-wrap: wrap;
}

.u-center-alt,
.u-center-alt:hover,
.u-center-alt:active {
    /* If flexbox method fails, this works for elements with unknown dimensions */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.u-overlay {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
}

.u-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.u-unselectable {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

/* Round the corners of the element */
.u-round {
    border-radius: 0.25rem !important;
}

/* Turns element into a circle */
.u-circle {
    border-radius: 50% !important;
}

.u-no-outline {
    outline: 0px !important;
}

.u-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.07) !important;
}