/* 共通 */
.nnds-button-icon {
    display: flex;
    border-radius: 999px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.nnds-button-icon:focus {
    border: 2px solid var(--color-purple-900);
}

.nnds-button-icon img {
    vertical-align: middle;
}

/* sizeごと */
.nnds-button-icon-small {
    width: 24px;
    height: 24px;
}

.nnds-button-icon-medium {
    width: 48px;
    height: 48px;
}

/* typeごと */
.nnds-button-icon-normal:hover {
    background: rgba(0, 0, 0, 0.04);
}

.nnds-button-icon-attentional {
    background: var(--color-brand-white);
    box-shadow: 0px 2px 5px rgba(64, 64, 64, 0.23);
}

.nnds-button-icon-attentional:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), var(--color-brand-white);
    box-shadow: 0px 4px 12px rgba(64, 64, 64, 0.15);
}