@import './palette';

/*============================================================================*\
  This file has styles that are shared by components either in web-foundation
  or Postmates products.
\*============================================================================*/


/*
    Convenience mixins for setting border radius
*/
.border-left-radius(@r) {
    border-top-left-radius: @r;
    border-bottom-left-radius: @r;
}

.border-right-radius(@r) {
    border-top-right-radius: @r;
    border-bottom-right-radius: @r;
}

.border-top-radius(@r) {
    border-top-left-radius: @r;
    border-top-right-radius: @r;
}

.border-bottom-radius(@r) {
    border-bottom-left-radius: @r;
    border-bottom-right-radius: @r;
}


/*
    Adds border radius to only the top of first-of-type and bottom of
    last-of-type. Accepts radius as "argument"
*/
.group-border-radius(@r) {
    &:first-of-type {
        .border-top-radius(@r);
    }

    &:last-of-type {
        .border-bottom-radius(@r);
    }
}

/*
    Mixin for the error tooltips shown under various components when they have
    errors.
*/
.error-tooltip-mixin() {
    background-color: @color-error;
    font-weight: 500;
    padding: 10px 10px 8px;
    font-size: 12px;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    top: ~"calc(100% + 5px)";
    z-index: 500;
    left: 0;
    right: 0;
    line-height: initial;

    &:before {
        position: absolute;
        top: -5px;
        left: 10px;
        content: '';
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid @color-error;
    }
}

/*
    Adds selection indicator dots (as seen in Dropdown and Radio).
    Selected styles are triggered by adding the "selected" class or by using
    the selection-indicator-selected mixin.
*/
.selection-indicator-selected() {
    &:after {
        transform: scale(0.375);
        border-color: transparent;
    }
}

.selection-indicator() {
    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -8px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        transform-origin: center;
    }

    &:before {
        background: @color-brand;
        transform: scale(0.95);
    }

    &:after {
        background: #fff;
        border: 1px solid @color-border;
        box-sizing: border-box;
    }

    &.selected {
        .selection-indicator-selected;
    }
}

/* right-align the dots */
.selection-indicator-right() {
    .selection-indicator;
    &:before,
    &:after {
        right: 12px;
    }
}

/* left-align the dots */
.selection-indicator-left() {
    .selection-indicator;
    &:before,
    &:after {
        left: 12px;
    }
}
