/**
 * ボタンコンポーネント用スタイル
 */

/* 青ボタンのスタイル */
.dark-button {
  display: inline-block;
  padding: var(--size-12) var(--size-20);
  color: var(--color-white);
  background-color: var(--color-main-blue);
  border: 1px solid var(--color-main-blue);
  border-radius: var(--size-2);
  font-size: var(--size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-yg);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.dark-button:hover,
.dark-button:focus {
  opacity: 0.8;
}

/* 白ボタンのスタイル */
.light-button {
  display: inline-block;
  padding: var(--size-12) var(--size-20);
  color: var(--color-main-blue);
  background-color: var(--color-white);
  border: 1px solid var(--color-main-blue);
  border-radius: var(--size-2);
  font-size: var(--size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-yg);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.light-button:hover,
.light-button:focus {
  background-color: rgba(var(--color-main-blue-rgb), 0.05);
}

/* 黒ボタンのスタイル */
.black-button {
  position: relative;
  display: inline-block;
  padding: var(--size-12) var(--size-20);
  padding-right: var(--size-48); /* アイコン用の余白確保 */
  color: var(--color-white) !important; /* !importantで強制的に白色指定 */
  background-color: var(--color-text-black);
  border: 1px solid var(--color-text-black);
  border-radius: var(--size-2);
  font-size: var(--size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-yg);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.black-button:hover,
.black-button:focus,
.black-button:visited {
  color: var(--color-white) !important;
  opacity: 0.8;
}

/* 赤ボタンのスタイル */
.red-button {
  position: relative;
  display: inline-block;
  padding: var(--size-12) var(--size-20);
  padding-right: var(--size-48); /* アイコン用の余白確保 */
  color: var(--color-white) !important; /* !importantで強制的に白色指定 */
  background-color: var(--color-accent-red);
  border: 1px solid var(--color-accent-red);
  border-radius: var(--size-2);
  font-size: var(--size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-yg);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.red-button:hover,
.red-button:focus,
.red-button:visited {
  color: var(--color-white) !important;
  opacity: 0.8;
}

/* ボタンアイコンのスタイル */
.button-icon {
  width: var(--size-24);
  height: var(--size-24);
  vertical-align: middle;
}

/* SVGアイコンのスタイル */
svg.button-icon {
  width: var(--size-24);
  height: var(--size-24);
}

svg {
  width: var(--size-16);
  height: var(--size-16);
  vertical-align: middle;
}

.button-icon--left {
  margin-right: var(--size-8);
}

.button-icon--right {
  margin-left: var(--size-8);
}

/* 黒ボタンの右端アイコン用スタイル */
.black-button .button-icon--right {
  position: absolute;
  right: var(--size-14);
  margin-left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 赤ボタンの右端アイコン用スタイル */
.red-button .button-icon--right {
  position: absolute;
  right: var(--size-14);
  margin-left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* レスポンシブスタイル */
@media (max-width: 768px) {
  .dark-button {
    font-size: var(--size-14);
    padding: var(--size-10) var(--size-16);
  }

  .light-button {
    font-size: var(--size-14);
    padding: var(--size-10) var(--size-16);
  }

  .black-button {
    font-size: var(--size-14);
    padding: var(--size-10) var(--size-16);
    padding-right: var(--size-40); /* モバイル時のアイコン用余白 */
  }

  .red-button {
    font-size: var(--size-14);
    padding: var(--size-10) var(--size-16);
    padding-right: var(--size-40); /* モバイル時のアイコン用余白 */
  }

  .button-icon {
    width: var(--size-20);
    height: var(--size-20);
  }

  svg.button-icon {
    width: var(--size-20);
    height: var(--size-20);
  }
}