/******************************************************************************
 *                                                                            *
 *    This file is part of RPB Chessboard, a WordPress plugin.                *
 *    Copyright (C) 2013-2026  Yoann Le Montagner <yo35 -at- melix.net>       *
 *                                                                            *
 *    This program is free software: you can redistribute it and/or modify    *
 *    it under the terms of the GNU General Public License as published by    *
 *    the Free Software Foundation, either version 3 of the License, or       *
 *    (at your option) any later version.                                     *
 *                                                                            *
 *    This program is distributed in the hope that it will be useful,         *
 *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
 *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           *
 *    GNU General Public License for more details.                            *
 *                                                                            *
 *    You should have received a copy of the GNU General Public License       *
 *    along with this program.  If not, see <http://www.gnu.org/licenses/>.   *
 *                                                                            *
 ******************************************************************************/


/* -------------------------------------------------------------------------- */
/* Top-menu */
/* -------------------------------------------------------------------------- */

#rpbchessboard-adminPageContent {
    margin-top: 20px;
}

#rpbchessboard-adminPageMenu {
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
}

#rpbchessboard-adminPageMenu > * {
    display: inline-block;
}

#rpbchessboard-adminPageMenu > * + * {
    margin-left: 40px;
}

#rpbchessboard-activePageButton {
    font-weight: bold;
}

.rpbchessboard-menuIcon,
.rpbchessboard-menuLabel {
    display: inline-block;
    vertical-align: middle;
}

.rpbchessboard-menuIcon {
    height: 24px;
    width: 24px;
    margin-right: 0.25em;
}

.rpbchessboard-menuIcon svg rect {
    fill: currentcolor;
}



/* -------------------------------------------------------------------------- */
/* Vertical spacing */
/* -------------------------------------------------------------------------- */

#rpbchessboard-adminPage * + h3 {
    margin-top: 2em;
}

#rpbchessboard-adminPage p + p.description {
    margin-top: -0.75em;
}

.rpbchessboard-columns {
    margin-top: 1em;
    margin-bottom: 1em;
}

#rpbchessboard-adminPage h3:first-child,
.rpbchessboard-columns p:first-child {
    margin-top: 0px;
}



/* -------------------------------------------------------------------------- */
/* Column layout */
/* -------------------------------------------------------------------------- */

.rpbchessboard-columns {
    display: flex;
}

.rpbchessboard-columns > div + div {
    margin-left: 20px;
}

.rpbchessboard-tuningChessboardParameterColumn {
    width: 350px;
}



/* -------------------------------------------------------------------------- */
/* Table layout */
/* -------------------------------------------------------------------------- */

.rpbchessboard-table {
    display: table;
}

.rpbchessboard-table > div {
    display: table-row;
}

.rpbchessboard-table > div > * {
    display: table-cell;
}



/* -------------------------------------------------------------------------- */
/* Components */
/* -------------------------------------------------------------------------- */

.rpbchessboard-squareSizeSlider {
    display: inline-block;
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.rpbchessboard-inlineSlider {
    margin-left: 3em;
}

.rpbchessboard-squareSizeField {
    text-align: right;
}

.rpbchessboard-smallGraphicRadioButtonFields,
.rpbchessboard-graphicRadioButtonFields {
    user-select: none;
}

.rpbchessboard-graphicRadioButtonFields {
    margin-bottom: 0.5em;
}

.rpbchessboard-smallGraphicRadioButtonLabel,
.rpbchessboard-smallGraphicRadioButtonFields {
    display: inline-block;
    vertical-align: middle;
}

.rpbchessboard-smallGraphicRadioButtonFields > span,
.rpbchessboard-graphicRadioButtonFields > div {
    display: inline-block;
}

.rpbchessboard-graphicRadioButtonFields > div {
    margin-right: 30px;
}

.rpbchessboard-smallGraphicRadioButtonLabel {
    margin-right: 10px;
}

.rpbchessboard-smallGraphicRadioButtonFields > span {
    margin-right: 5px;
}

.rpbchessboard-smallGraphicRadioButtonFields input[type="radio"],
.rpbchessboard-graphicRadioButtonFields input[type="radio"] {
    display: none;
}

.rpbchessboard-smallGraphicRadioButtonFields input[type="radio"] + label,
.rpbchessboard-graphicRadioButtonFields input[type="radio"] + label {
    display: block;
    line-height: 0px;
    cursor: pointer;
}

.rpbchessboard-graphicRadioButtonFields input[type="radio"] + label {
    padding: 14px;
}

.rpbchessboard-smallGraphicRadioButtonFields input[type="radio"] + label {
    padding: 8px;
}

.rpbchessboard-smallGraphicRadioButtonFields input[type="radio"]:checked + label,
.rpbchessboard-graphicRadioButtonFields input[type="radio"]:checked + label {
    border: solid 4px rgb(0, 116, 162);
}

.rpbchessboard-graphicRadioButtonFields input[type="radio"]:checked + label {
    padding: 10px;
}

.rpbchessboard-smallGraphicRadioButtonFields input[type="radio"]:checked + label {
    padding: 4px;
}

#rpbchessboard-adminPage input[name="pieceSymbolMode"] {
    margin-left: 3em;
}

#rpbchessboard-adminPage input[name="pieceSymbolMode"]:first-child {
    margin-left: 0px;
}

.rpbchessboard-pieceSymbolLabel {
    display: inline-block;
    vertical-align: middle;
    line-height: 0px;
}

.rpbchessboard-pieceSymbolField {
    vertical-align: middle;
    text-align: center;
    margin-right: 3em;
}

.rpbchessboard-pieceSymbolField:last-child {
    margin-right: 0px;
}

#rpbchessboard-adminPage code {
    padding: inherit;
}



/* -------------------------------------------------------------------------- */
/* Theming page */
/* -------------------------------------------------------------------------- */

#rpbchessboard-themingPreview {
    position: fixed;
}

.rpbchessboard-colorsetSnippet {
    height: 22px;
    width: 22px;
}

.rpbchessboard-piecesetSnippet {
    height: 32px;
    width: 32px;
}

.rpbchessboard-nameCell {
    width: 300px;
}

.rpbchessboard-slugCell {
    width: 150px;
}

.rpbchessboard-previewCell > * {
    display: inline-block;
}

.rpbchessboard-previewCell input {
    margin-top: 0px;
    margin-bottom: 0px;
}

.rpbchessboard-rowActions.disabled,
.rpbchessboard-themingEditor {
    display: none;
}

.rpbchessboard-inlineForm {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.rpbchessboard-inlineForm > * {
    margin-top: 0px;
    margin-bottom: 0px;
}

.rpbchessboard-inlineForm > .rpbchessboard-inlineFormTitle {
    margin-bottom: 0.5em;
    font-weight: 600;
    text-transform: uppercase;
}

.rpbchessboard-inlineForm label {
    display: flex;
    align-items: baseline;
    margin: 0.2em 0;
}

.rpbchessboard-inlineForm label > span {
    margin-right: 0.5em;
    font-style: italic;
}

.rpbchessboard-inlineForm label > input {
    flex-grow: 1;
}

.rpbchessboard-inlineForm > p.submit.rpbchessboard-inlineFormButtons {
    margin-top: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.rpbchessboard-colorsetEditorComponents > div > div {
    padding-top: 10px;
}

.rpbchessboard-colorsetEditorComponents > div:first-child > div {
    padding-top: calc(10px - 0.2em);
}

.rpbchessboard-colorsetEditorComponents > div > div + div {
    padding-left: 25px;
}

.rpbchessboard-colorsetEditorComponents input {
    margin-right: 0px;
}

.rpbchessboard-colorsetEditorComponents .iris-border { /* Same border as the textfield just above */
    border-radius: 4px;
    border-color: #8c8f94;
}

.rpbchessboard-piecesetEditorComponents {
    line-height: 0px;
}

.rpbchessboard-piecesetEditorComponents > div > div {
    padding-top: 5px;
}

.rpbchessboard-piecesetEditorComponents > div:first-child > div {
    padding-top: calc(10px - 0.2em);
}

.rpbchessboard-piecesetEditorComponents > div > div + div {
    padding-left: 5px;
}

.rpbchessboard-coloredPieceButton {
    display: inline-block;
    border: 1px solid #ddd;
}

.rpbchessboard-coloredPieceButton img {
    height: 64px;
    width: 64px;
}



/* -------------------------------------------------------------------------- */
/* About page */
/* -------------------------------------------------------------------------- */

#rpbchessboard-aboutActions {
    margin: 1em 0px;
}

#rpbchessboard-aboutActions .button {
    height: 32px;
}

.rpbchessboard-aboutActionIcon,
.rpbchessboard-aboutActionLabel {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1px;
}

.rpbchessboard-aboutActionIcon.dashicons {
    height: 28px;
    width: 28px;
    font-size: 28px;
}

.rpbchessboard-aboutActionIcon {
    margin-right: 5px;
}

#rpbchessboard-contributorList {
    width: 860px;
    columns: 200px 4;
    column-gap: 20px;
}

#rpbchessboard-translatorList {
    width: 860px;
    columns: 400px 2;
    column-gap: 60px;
}

#rpbchessboard-translatorList > li {
    display: flex;
    align-items: center;
}

#rpbchessboard-translatorList > li > span:nth-child(2) {
    margin-left: 3px;
    margin-right: 3px;
    width: 94px;
}