.bd-colourpickerSwatch {
    width: 50px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid hsla(0, 0%, 100%, .1);
}

.bd-formColourpicker {
    position: relative;

    .vc-chrome { // sass-lint:disable-line class-name-format
        position: absolute;
        right: 0;
        top: 35px;
        border-radius: 3px;
        z-index: 9001;

        .vc-chrome-body { // sass-lint:disable-line class-name-format
            background: #36393e;

            .vc-chrome-fields-wrap { // sass-lint:disable-line class-name-format
                .vc-input__input { // sass-lint:disable-line class-name-format
                    background: #1e2124;
                    color: #fff;
                    box-shadow: inset 0 0 0 1px #000;
                }

                .vc-chrome-toggle-icon-highlight { // sass-lint:disable-line class-name-format
                    background: #1e2124;
                }

                .vc-chrome-toggle-btn { // sass-lint:disable-line class-name-format
                    svg {
                        path {
                            fill: #fff;
                        }
                    }
                }
            }
        }

        &:not(.bd-hide) {
            animation: bd-colourpickerSlidein .1s ease-in;
        }
    }
}