/* ボタン関連スタイル - buttons.css */

/* ボタンスタイル共通 */
.search-button, .open-all-button, .graph-button, .paste-button, 
.login-button, .logout-button, .start-button, .clear-history-button {
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

/* 個別ボタンスタイル */
.search-button {
  background-color: #4CAF50;
}

.search-button:hover {
  background-color: #45a049;
}

.paste-button {
  background-color: #2196F3;
  margin-left: 5px;
}

.paste-button:hover {
  background-color: #0b7dda;
}

.login-button, .start-button {
  background-color: #4285F4;
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
}

.login-button:hover, .start-button:hover {
  background-color: #3367D6;
}

.logout-button {
  background-color: #757575;
  font-size: 12px;
  padding: 5px 10px;
}

.logout-button:hover {
  background-color: #616161;
}

.open-all-button {
  background-color: #FF9800;
}

.open-all-button:hover {
  background-color: #F57C00;
}

.graph-button {
  background-color: #4CAF50;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}

.graph-button:hover {
  background-color: #45a049;
}

.clear-history-button {
  background-color: #F44336;
  font-size: 12px;
  padding: 5px 10px;
}

.clear-history-button:hover {
  background-color: #E53935;
}

/* JANコピーボタン */
.copy-jan-button {
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
  transition: background-color 0.3s;
}

.copy-jan-button:hover {
  background-color: #0b7dda;
}

/* URLコピーボタン */
.copy-url-button {
  background-color: #FF9800;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
  transition: background-color 0.3s;
}

.copy-url-button:hover {
  background-color: #F57C00;
}

/* 旧コピーボタン（後方互換性のため残しておく） */
.copy-button {
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
  transition: background-color 0.3s;
}

.copy-button:hover {
  background-color: #0b7dda;
}

/* Twitterシェアボタン */
.tweet-button {
  background-color: #000000;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
  transition: background-color 0.3s;
  display: inline-flex;
  align-items: center;
}

.tweet-button:hover {
  background-color: #1DA1F2;
}

.tweet-button::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='10' height='10' fill='white'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 3px;
}

/* ログインボタン共通スタイル */
.login-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Discordログインボタン */
.discord-login {
  background-color: #5865F2;
}

.discord-login:hover {
  background-color: #4752C4;
}

/* アイコン調整 */
.login-button i {
  margin-right: 5px;
}

/* ボタン表示切り替え */
.open-all-button .mobile-text {
  display: none;
}

.open-all-button .pc-text {
  display: inline;
}

/* スマホビュー調整 */
@media screen and (max-width: 500px) {
  .search-button {
    white-space: nowrap;
    font-size: 12px;
    padding: 8px 10px;
  }
  
  .logout-button {
    font-size: 11px;
    padding: 3px 8px;
  }
  
  /* モバイル用のボタン表示切替 */
  .open-all-button .pc-text {
    display: none;
  }
  
  .open-all-button .mobile-text {
    display: inline;
  }
  
  .open-all-button {
    font-size: 12px;
    padding: 5px 8px;
    white-space: nowrap;
  }

  /* ログインボタンのスマホ調整 */
  .login-buttons {
      flex-direction: row;
      justify-content: flex-end; /* 右寄せに修正 */
      width: 100%;
  }
  
  .login-button {
      font-size: 11px;
      padding: 5px 8px;
      white-space: nowrap;
      flex: 0 1 auto;
      text-align: center;
  }
  
  .login-button i {
      margin-right: 3px;
      font-size: 10px;
  }
  
  .login-button span {
      font-size: 10px;
  }

  .tweet-button {
    font-size: 8px;
    padding: 1px 3px;
    margin-left: 2px;
    min-width: 35px;
    white-space: nowrap;
  }
  
  .tweet-button::before {
    width: 6px;
    height: 6px;
    margin-right: 1px;
  }

  /* コピーボタンのスマホ調整 */
  .copy-jan-button,
  .copy-url-button,
  .copy-button {
    font-size: 8px;
    padding: 1px 3px;
    margin-left: 2px;
    min-width: 45px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* ボタンコンテナのレスポンシブ対応 */
  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
  }
  
  .button-container button {
    flex: 0 0 auto;
    margin: 0;
  }
}

/* さらに小さい画面サイズ向け */
@media screen and (max-width: 350px) {
  .login-button {
    font-size: 10px;
    padding: 4px 6px;
  }
  
  .copy-jan-button,
  .copy-url-button,
  .copy-button {
    font-size: 7px;
    padding: 1px 2px;
    margin-left: 1px;
    min-width: 40px;
  }
  
  .tweet-button {
    font-size: 7px;
    padding: 1px 2px;
    margin-left: 1px;
    min-width: 30px;
  }
  
  .tweet-button::before {
    width: 5px;
    height: 5px;
    margin-right: 1px;
  }
}