#theme-button-container {
    display: flex;
}

.theme-button {
    margin: 10px;
    height: 60px;
    width: 180px;
    display: flex;
    transition: .2s cubic-bezier(0, 0.55, 0.25, 1);
}

.theme-button:hover {
    transform: scale(1.03);
}

.theme-button-part {
    width: 60px;
    border-width: 5px;
    border-style: solid;
}

.theme-button-part.left {
    border-radius: 1em 0 0 1em;
}
.theme-button-part.right {
    border-radius: 0 1em 1em 0;
}
.theme-button-part.centre {
    border-width: 5px 0;
}

#theme-preview .container, #theme-preview .element {
    margin: 10px;
}

#bordered-element {
    width: 350px;
}

#theme-editor input[type=color] {
    width: 200px;
    height: 20px;
    padding: 0;
}

/* Chrome-specific, controls the area between the input border and the colour swatch */
#theme-editor input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}

/* Browser-specific selectors cannot be grouped. Chrome ignores the whole thing
 * if it does not recognise any selector
 */
#theme-editor input[type=color]::-moz-color-swatch {
    border: none;
    border-radius: var(--rounding);
}
#theme-editor input[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: var(--rounding);
}

#theme-editor label {
    margin-bottom: 10px;
}

#theme-editor button {
    margin-top: 20px;
}

.colour-selector-box {
    display: inline-flex;
    width: 250px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}