@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';

$factoiBorderRadius: 1em;

.factoid-widget {
    border-radius: $factoiBorderRadius;
    border-width: 2px;
    cursor: pointer;
    overflow: hidden;
    width: 15em;
    &.widget-selected {
        border-color: rgba($success, 0.5);
    }
    &:hover {
        border-color: rgba($primary, 0.5);
    }

    p, h3 {
        margin: 0;
    }

    .factoid-main-body {
        padding: 0.75em;
        height: 6.5em;
    }
    .list-group-item {
        background-color: transparent;
        padding: 0.25em;
    }
    .list-group-item p {
        text-align: center;
    }
    .factoid-icon {
        font-size: 3em;
        text-align: center;
    }
    .factoid-is-loading {
        opacity: 0.25;
    }
    .icon-info-overlay {
        position: absolute;
        width: 100%;

        .icon-info-overlay-icon {
            font-size: 5em;
            opacity: 0.5;
            text-align: center;
        }
    }
}