/*
//============================================================================================
// system name    : －－－－
// program name   : bAsLayout StyleSheet
// file name      : bAsLayout.css
// summary        : bAs入力コンポーネント用スタイルシート
//--------------------------------------------------------------------------------------------
// author         : 👍bAs)Yoshi
// creation date  : 2024/10/21
// version        : 1.00
//--------------------------------------------------------------------------------------------
// change history : 2024/10/21 👍bAs)Yoshi 新規作成
// 
// Copyright 2024 bEST ANSWER's Inc.
//============================================================================================
*/

@charset "UTF-8";


/* ===================================================================== */
/* （変数定義）****************************** STA */
:root {
    /* 入力項目の基本フォントサイズ */
    --bAs_FontSize_Input: var(--bAs_FONT_SIZE_ROOT);
    /* 入力項目タイトルの基本フォントサイズ */
    --bAs_FontSize_InputTitle: var(--bAs_FONT_SIZE_M);
    /* 入力項目プレースホルダーの基本フォントサイズ */
    --bAs_FontSize_InputPlaceholder: 0.75em;
    /* 入力項目接尾文字の基本フォントサイズ */
    --bAs_FontSize_InputSuffix: var(--bAs_FONT_SIZE_S);
}
/* （変数定義）****************************** END */


/* 
--------------------------------------------------------------------- 
 bAs Input 基底スタイル
--------------------------------------------------------------------- 
*/
.bAs_InputComponent {
}

.bAs_InputComponent_Label {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bAs_InputComponent_Title {
    font-size: var(--bAs_FontSize_InputTitle);
    color: royalblue;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}
.bAs_InputComponent_Title[aria-disabled], 
.bAs_InputComponent_Title[aria-disabled="true"] {
    color: gray;
}

.bAs_InputComponent_Field {
    flex-grow: 1;
    align-self: stretch;
    font-size: var(--bAs_FontSize_InputTitle);
    border: 1px solid black;
    padding: 3px 5px;
    min-width: 0;
}

.bAs_InputComponent_Field::placeholder {
    font-size: var(--bAs_FontSize_InputPlaceholder);
    font-style: italic;
    color: black;
    opacity: 0.4;
    text-align: left;
}

.bAs_InputComponent_Suffix {
    font-size: var(--bAs_FontSize_InputSuffix);
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    flex-shrink: 0;
}
.bAs_InputComponent_InputBox {
    height: 100%;
    padding: 1px;
}

/* ---------------------------------------------- */
/* --- 入力項目要素の外観設定：値変更時（フォーカス） ---*/
.bAs_InputComponent_InputBox input:not([type="radio"]):not([type="checkbox"]):enabled:focus,
.bAs_InputComponent_InputBox select:enabled:focus,
.bAs_InputComponent_InputBox textarea:enabled:focus {
    background-color: lightcyan;
    outline-color: mediumblue;
}
/* --- 入力項目要素の外観設定：非活性時 ---*/
.bAs_InputComponent_InputBox input:not([type="radio"]):not([type="checkbox"]):disabled,
.bAs_InputComponent_InputBox select:disabled,
.bAs_InputComponent_InputBox textarea:disabled {
    background-color: #dddddd;
    color: #333333;
}

/* --- 入力項目要素の外観設定：読み取り専用時（ReadOnly）でフォーカス時の外枠の色を指定 ---*/
.bAs_InputComponent_InputBox input:not([type="radio"]):not([type="checkbox"]):read-only:focus,
.bAs_InputComponent_InputBox select:read-only:focus,
.bAs_InputComponent_InputBox textarea:read-only:focus {
    background-color: #f2f2f2;
    outline-color: navy;
}

/* ---------------------------------------------- */
/* --- 入力項目要素の外観設定：値変更時 ---*/
.bAs_InputComponent_Edited input:not([type="radio"]):not([type="checkbox"]):enabled,
.bAs_InputComponent_Edited select:enabled,
.bAs_InputComponent_Edited textarea:enabled {
    border-color: #aa9900;
    color: #aa9900;
}
/* --- 入力項目要素の外観設定：値変更時（フォーカス） ---*/
.bAs_InputComponent_Edited input:not([type="radio"]):not([type="checkbox"]):enabled:focus,
.bAs_InputComponent_Edited select:enabled:focus,
.bAs_InputComponent_Edited textarea:enabled:focus {
    background-color: #fdffd6;
    outline-color: #aa9900;
}
/* --- 入力項目要素の外観設定〔タイトル〕：値変更時 ---*/
.bAs_InputComponent_Edited .bAs_InputComponent_Title:not([aria-disabled]),
.bAs_InputComponent_Edited .bAs_InputComponent_Title[aria-disabled="false"] {
    color: #bfcd00;
}


/* ---------------------------------------------- */
/* --- 入力項目要素の外観設定：エラー時 ---*/
.bAs_InputComponent_Invalid input:not([type="radio"]):not([type="checkbox"]):enabled,
.bAs_InputComponent_Invalid select:enabled,
.bAs_InputComponent_Invalid textarea:enabled {
    color: red !important;
    border-color: red !important;
}
/* --- 入力項目要素の外観設定：エラー時（フォーカス） ---*/
.bAs_InputComponent_Invalid input:not([type="radio"]):not([type="checkbox"]):enabled:focus,
.bAs_InputComponent_Invalid select:enabled:focus,
.bAs_InputComponent_Invalid textarea:enabled:focus {
    background-color: lightpink;
    /*border-color: red !important;*/
    outline-color: red;
}
/* --- 入力項目要素の外観設定〔タイトル〕：エラー時 ---*/
.bAs_InputComponent_Invalid .bAs_InputComponent_Title:not([aria-disabled]), 
.bAs_InputComponent_Invalid .bAs_InputComponent_Title[aria-disabled="false"] {
    color: red !important;
}
/* 画面上部の一覧検索用インプットのタイトル */
.bAs-SearchCriteria-Input .bAs_InputComponent_Title {
    color: #7c890f
}