.input__colour {
    display: inline-block;
    width: 40px;
    height: 20px;
    overflow: hidden;
    border: 1px solid #222;
    background: #222;
    border-radius: 2px;
    transition: border-color .2s;
    cursor: pointer;

    &:hover,
    &:focus,
    &:focus-within {
        border-color: var(--accent-colour);
    }

    &__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
        background-size: 80px 40px;
    }

    &__control {
        border-width: 0;
        position: absolute;
        top: -5px;
        left: -5px;
        width: 100px;
        height: 100px;
        z-index: 10;
    }
}