/*
Copyright (c) 2024 Revolme.Lab Yamasaki Masaki
標準入力系CSS
*/
@charset "utf-8";
:root
{
    --color-black:#000000;
    --color-gray:#999999;
    --color-white:#FFFFFF;
    --color-normal:#FFFFFF;
    --color-primary:#1878fa;
    --color-secondary:#EFEFEF;
    --color-warning:#f14668;
    --color-danger:#f14668;

    --focus-color:#1878fa;
    --error-color:#f14668;
}

input, textarea, select, .button
{
}

input, textarea, select, div.editor_area, p.input
{
	-webkit-appearance:auto;
	-moz-appearance:auto;
	-ms-appearance:auto;
	-o-appearance:auto;
    appearance:auto;
    line-height:1.5;

    margin:0px;
    padding:0px;

    padding:0.20em 0.40em;

    background-color:#FFFFFF;
    color:#000000;

    border-radius:0px;
}
div.editor_area
{
    padding:0.5em;
}
input:focus, textarea:focus, select:focus
{
	-webkit-appearance:auto;
	-moz-appearance:auto;
	-ms-appearance:auto;
	-o-appearance:auto;
    appearance:auto;

    transition-delay:0s;
    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
input:not([type="radio"], [type="checkbox"]), textarea, select, div.editor_area, p.input
{
    box-shadow: 0px 0px 0px 1px #00000030;
    border:1px solid rgba(0,0,0,0);
    border-radius:0.25em;
}
input:focus:not([type="radio"], [type="checkbox"]), textarea:focus, select:focus
{
    border-color:var(--focus-color);
}
input.danger:not([type="radio"], [type="checkbox"]), textarea.danger, select.danger
{
    border-color:var(--error-color);
}
input[type="radio"], input[type="checkbox"]
{
    margin-left:0.25em;
    margin-right:0.25em;
}
input[type="number"]
{
    text-align: right;
}
label
{
    user-select: none;
    display: inline-flex;
    align-items: center;
}
label > *
{
    flex: 0 1 auto;
}
label > span
{
    flex: 1 1 auto;
    word-break: keep-all;
    padding:0 0.25em;
}
label:has(input[type="radio"], input[type="checkbox"])
{
    line-height:2.5;
    margin-right:0.5em;
    cursor:pointer;
}
label > input:not([type="radio"], [type="checkbox"]),
label > textarea,
label > select,
label > p.input
{
    width:100%;
}
label > p.input::after
{
    content:"\00a0";
}
label + label
{
}

/* ボタン */
.button
{
    display: inline-grid;
    grid-template:
    "..... icon-prefix label icon-suffix ....."auto
    /1fr   auto        auto  auto         1fr;
    box-shadow: 0px 0px 1px 1px #00000030;
    padding:0.5em 0.8em;
    border-radius:0.5em;
    background-color:var(--color-primary);
    color:var(--color-white);
    font-weight:bold;
    user-select: none;
}
.button:hover
{
    background-color:var(--color-white);
    color:var(--color-primary);

    transition-delay:0s;
    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
.button.button-secondary
{
    background-color:var(--color-secondary);
    color:var(--color-black);
}
.button.button-secondary:hover
{
    background-color:var(--color-white);
    color:var(--color-black);
}
.button.button-tertiary
{
    background-color:var(--color-white);
    color:var(--color-black);
}
.button.button-tertiary:hover
{
    background-color:var(--color-secondary);
    color:var(--color-gray);
}

.button.button-danger
{
    background-color:var(--color-danger);
    color:var(--color-white);
}
.button.button-danger:hover
{
    background-color:var(--color-white);
    color:var(--color-danger);
}
html.loading .button,
.button:disabled
{
    opacity: 0.6;
    pointer-events: none;
}
.button .button__label
{
    grid-area: label;
    display: grid;
    place-items: center;
}
.button .button__icon-prefix + .button__label
{
    margin-left: 0.25em;
}
.button .button__icon-suffix + .button__label
{
    margin-right: 0.25em;
}
.button .button__icon-prefix
{
    grid-area: icon-prefix;
    display: grid;
    place-items: center;
}
.button .button__icon-suffix
{
    grid-area: icon-suffix;
    display: grid;
    place-items: center;
}

/* 汎用入力フィールド */
.input-field
{
    display: grid;
    grid-template:
    "label" auto
    "input" auto
    "message" auto
    /100%;
}
.input-field__input
{
    grid-area: input;
}
.input-field__input__master
{
    display: flex;
    align-items: center;
}
.input-field__input__master li
{
    cursor:pointer;
}
.input-field__label
{
    grid-area: label;
    font-size: 0.8em;
    line-height: 1.5;
}
.input-field__message
{
    grid-area: message;
    font-size: 0.9em;
}
.input-field__message > :first-child
{
    margin-top: 0.25em;
}
.input-field__message .error
{
    color:var(--error-color);
}
.input-field__message .notice
{
    color:var(--color-gray);
}
.input-list
{
    display: flex;
    align-items: center;
    margin: -0.25em;
}
.input-list > *
{
    flex: 0 0 auto;
    margin:0.25em;
}

.suggest-list
{
    /* position: absolute;
    top: 100%;
    width: 100%; */
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}
.suggest-list-item
{
    padding:0.5em;
    cursor: pointer;
}
.suggest-list-item:hover
{
    text-decoration: underline;
}
.suggest-list .suggest-list-item + .suggest-list-item
{
    border-bottom:1px dashed #CCCCCC;
}

/*CKエディタ*/
.ck.ck-powered-by
{
    display:none;
}