@import "../../../scss/variables";

/* Container */

.sp-dark {
    &.sp-container {
        background-color: #333;
        border: solid 1px #555;
    }

    &.sp-replacer {
        border: solid 1px $white;
        background: #333;
        color: #eee;
        vertical-align: middle;
    }
}

/* Replacer (the little preview div that shows up instead of the <input>) */

.sp-replacer {
    &:hover,
    &.sp-active {
        border-color: #f0c49b;
        color: $white;
    }

    &.sp-disabled {
        border-color: silver;
        color: silver;
    }
}

.sp-dark {
    .sp-preview {
        border: solid 1px #999;
    }

    .sp-cancel {
        color: #f99f9f !important;
    }

    &.sp-replacer {
        &:hover,
        &.sp-active {
            border-color: #f0c49b;
            color: #111;
        }
    }
}
