// Elements

// Blockquotes
blockquote,
blockquote p {
    line-height: 1.25rem;
}
blockquote {
    margin: 0 0 20px;
    padding: .5rem 1.25rem;
    cite {
        @include font-size(small);
        display: block;
        &::before {
            content: '\2014 \0020';
        }
    }
}

// __Lists__

ul,
ol {
    margin-bottom: 20px;
}
ul { list-style: none outside; }
ol { list-style: decimal; }

sup {
    @include font-size(small);
    vertical-align: super;
}

.clickable {
    cursor: pointer;
}

.not-clickable {
    cursor: default;
}

.draggable {
    cursor: move;
}

svg {
    height: 1rem;
    width: 1rem;
}

//Datepicker
.pika-single {
    // scss-lint:disable ImportantRule
    min-width: 240px;
    width: auto;
    z-index: 999999;
    .pika-title {
        color: $grayer;
    }
    .is-selected {
        .pika-button {
            background: $primary;
            border-radius: 0 !important;
            box-shadow: inset 0 1px 3px $primary;
        }
    }
    .is-today {
        .pika-button {
            color: $primary;
        }
        &.is-selected {
            button {
                color: $white;
            }
        }
    }
    .pika-button {
        &:hover {
            background: $primary-light !important; //Important added because plugin has it :S
            border-radius: 0 !important; //Important added because plugin has it :S
            box-shadow: inset 0 1px 3px $primary-light !important; //Important added because plugin has it :S
        }
    }
}

.spin {
    img {
        @include loading-spinner;
        max-height: 2rem;
        max-width: 2rem;
    }
}

// scss-lint:disable QualifyingElement
div.awesomplete {
    input {
        display: inline-block;
    }
    > ul {
        background: rgba($black, .95);
        color: $primary-light;
        top: 2.25rem;
        transition: all .2s ease;
        &::before {
            background: rgba($black, .95);
        }
        &[hidden] {
            position: absolute;
            top: 1.5rem;
            transform: scale(1);
        }
        > li {
            &:hover {
                background: $primary-light;
                color: $black;
            }
        }
    }
    mark {
        background: $primary-light;
        color: $black;
    }
    li {
        &:hover {
            mark {
                background: $primary-light;
                color: $black;
            }
        }
    }
}