/* カテゴリ切り替えタブの1個分のボタン(Figma: tab-button)
 * 色はカテゴリごとに固定(マナー=orange, 防犯=green)のため、色名のmodifierクラスで表現する。
 * Figma上は見た目のピル(高さ約30px)を高さ44pxの当たり領域の中で中央配置しているため、
 * .guest-tab-button(高さ44pxのレイアウト用) > .guest-tab-button__pill(実際に色のつくピル) の2重構造。
 * SP/PCでサイズ差は無い。 */
.guest-tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 44px;
  padding: 4px 0;
  border: none;
  background: none;
  cursor: pointer;
}

.guest-tab-button__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 32px;
  background: var(--guest-color-tag-white);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  white-space: nowrap;
}

.guest-tab-button--orange .guest-tab-button__pill {
  border-color: var(--guest-color-tag-orange);
  color: var(--guest-color-tag-orange);
}

.guest-tab-button--green .guest-tab-button__pill {
  border-color: var(--guest-color-tag-green);
  color: var(--guest-color-tag-green);
}

.guest-tab-button--orange.guest-tab-button--active .guest-tab-button__pill {
  border-color: var(--guest-color-tag-orange);
  background: var(--guest-color-tag-orange);
  color: var(--guest-color-tag-white);
  /* Figma effect style "button"。トークンには無い値のため生のrgbaのまま */
  box-shadow: 0 4px 6px rgba(254, 161, 69, 0.3);
}

.guest-tab-button--green.guest-tab-button--active .guest-tab-button__pill {
  border-color: var(--guest-color-tag-green);
  background: var(--guest-color-tag-green);
  color: var(--guest-color-tag-white);
  box-shadow: 0 4px 6px rgba(96, 199, 77, 0.3);
}