/*
  Preset-3（グラデーション・CSS変数ベース）
  役割: 全てのボタンタイプに対応、CSS変数でボタンごとに色を指定可能
  適用対象: 本CSSを読み込むテンプレートの全てのボタン
  形状定義: bid-common.css
  使い方: 各ボタンにインラインスタイルで --btn-grad-start, --btn-grad-end, --btn-border を指定
*/

/* デフォルトのグラデーション色定義（primary用） */
:root {
  --btn-primary-grad-start: #e77063;
  --btn-primary-grad-end: #c44b3e;
  --btn-primary-border: #B24A1F;
  --btn-primary-text: #fff;
}

/* primary 配色（CSS変数ベース） */
.btn.btn-primary {
  background-image: linear-gradient(180deg,
    var(--btn-grad-start, var(--btn-primary-grad-start)) 0%,
    var(--btn-grad-end, var(--btn-primary-grad-end)) 100%);
  background-color: var(--btn-grad-end, var(--btn-primary-grad-end));
  color: var(--btn-text, var(--btn-primary-text));
  border: 1px solid var(--btn-border, var(--btn-primary-border));
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-primary:hover {
  filter: brightness(1.05);
}
.btn.btn-primary:active {
  box-shadow: none;
}

/* info 配色（CSS変数ベース） */
.btn.btn-info {
  background-image: linear-gradient(180deg,
    var(--btn-grad-start, #5e5e70) 0%,
    var(--btn-grad-end, #444455) 100%);
  background-color: var(--btn-grad-end, #515162);
  color: var(--btn-text, #fff);
  border: 1px solid var(--btn-border, #353542);
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-info:hover {
  filter: brightness(1.05);
}
.btn.btn-info:active {
  box-shadow: none;
}

/* success 配色（CSS変数ベース） */
.btn.btn-success {
  background-image: linear-gradient(180deg,
    var(--btn-grad-start, #6dd5a4) 0%,
    var(--btn-grad-end, #4db88d) 100%);
  background-color: var(--btn-grad-end, #5CB1B1);
  color: var(--btn-text, #fff);
  border: 1px solid var(--btn-border, #3a9977);
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-success:hover {
  filter: brightness(1.05);
}
.btn.btn-success:active {
  box-shadow: none;
}

/* warning 配色（CSS変数ベース） */
.btn.btn-warning {
  background-image: linear-gradient(180deg,
    var(--btn-grad-start, #f5c842) 0%,
    var(--btn-grad-end, #e0a800) 100%);
  background-color: var(--btn-grad-end, #f0ad4e);
  color: var(--btn-text, #fff);
  border: 1px solid var(--btn-border, #c89000);
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-warning:hover {
  filter: brightness(1.05);
}
.btn.btn-warning:active {
  box-shadow: none;
}

/* danger 配色（CSS変数ベース） */
.btn.btn-danger {
  background-image: linear-gradient(180deg,
    var(--btn-grad-start, #e77063) 0%,
    var(--btn-grad-end, #d43f3a) 100%);
  background-color: var(--btn-grad-end, #d9534f);
  color: var(--btn-text, #fff);
  border: 1px solid var(--btn-border, #b52b27);
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-danger:hover {
  filter: brightness(1.05);
}
.btn.btn-danger:active {
  box-shadow: none;
}

/* default 配色（CSS変数ベース） */
.btn.btn-default {
  background-image: linear-gradient(180deg,
    var(--btn-grad-start, #e0e0e0) 0%,
    var(--btn-grad-end, #c0c0c0) 100%);
  background-color: var(--btn-grad-end, #d0d0d0);
  color: var(--btn-text, #333);
  border: 1px solid var(--btn-border, #a0a0a0);
  text-shadow: none;
  box-shadow: none;
}
.btn.btn-default:hover {
  filter: brightness(1.05);
}
.btn.btn-default:active {
  box-shadow: none;
}