.bd-settingsSchemes {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(114, 118, 126, 0.3);

    .bd-settingsSchemesContainer {
        margin-right: -15px;
    }
}

.bd-settingsScheme {
    display: inline-block;
    width: calc(33.3% - 15px);
    margin: 0 15px 15px 0;
    cursor: pointer;
    vertical-align: top;

    .bd-settingsModal & {
        width: calc(50% - 15px);

        .bd-settingsSchemeIcon {
            height: 120px;
        }
    }

    .bd-settingsSchemeIcon {
        box-sizing: border-box;
        width: 100%;
        height: 120px;
        border: 2px solid $coldimwhite;
        border-radius: 3px;
        transition: border-color 0.2s ease;
        margin-bottom: 15px;
        background: center / cover no-repeat #2f3136;
    }

    .bd-settingsSchemeName {
        font-weight: 500;
        color: #f6f6f7;
    }

    .bd-settingsSchemeHint {
        flex: 1 1 auto;
        color: #72767d;
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
    }

    &:hover {
        .bd-settingsSchemeIcon {
            border-color: lighten($coldimwhite, 20%);
        }
    }

    &.bd-active {
        cursor: default;

        .bd-settingsSchemeIcon {
            border-color: $colbdgreen;
        }
    }
}