/* 공용 버튼(색 · 크기 · 모양만). 컴포넌트 CSS 가 같은 특정도로 덮으므로 그보다 먼저 싣는다.
   말줄임이 필요한 문구는 span.fstd-button__label 로 감싼다 - flex 버튼의 맨 글자에는 text-overflow 가 걸리지 않는다. */

.fstd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-content: safe center;      /* safe 를 모르는 브라우저는 윗줄 */
    gap: 4px;
    box-sizing: border-box;
    height: var(--fstd-button-lg-h);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: var(--ds-text-label, 16px);
    font-weight: var(--ds-weight-semibold, 600);
    line-height: var(--ds-lh-label, 24px);
    letter-spacing: -0.24px;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

.fstd-button__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fstd-button__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.fstd-button--md {
    height: 40px;
    font-weight: var(--ds-weight-medium, 500);
}
.fstd-button--md .fstd-button__icon {
    width: 14px;
    height: 14px;
}

.fstd-button--icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 8px;
}
.fstd-button--icon .fstd-button__icon {
    width: 24px;
    height: 24px;
}

/* <a> 버튼도 있어 :hover · :active 를 함께 적는다 - base.css 의 a:hover { color: inherit }(0,1,1)가 클래스 하나(0,1,0)를 이긴다. */
.fstd-button--brand,
.fstd-button--brand:hover,
.fstd-button--brand:active {
    background-color: var(--fstd-brand);
    color: var(--fstd-on-color);
}
.fstd-button--neutral,
.fstd-button--neutral:hover,
.fstd-button--neutral:active {
    background-color: transparent;
    border-color: var(--fstd-neutral-border);
    color: var(--fstd-neutral-label);
}
/* 위 --neutral 상태 셀렉터와 특정도(0,2,0)가 같아 이 규칙이 뒤에 있어야 이긴다. */
.fstd-button--neutral.fstd-button--icon {
    border-color: var(--fstd-stroke-shy);
    color: var(--fstd-fg-muted);
}
.fstd-button--kakao,
.fstd-button--kakao:hover,
.fstd-button--kakao:active {
    background-color: var(--fstd-kakao-button);
    color: var(--fstd-kakao-label);
}