#contact-buttons {
    position: fixed;
    bottom: 50%;
    right: 30px;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    align-items: end;
    box-sizing: content-box;
    z-index: 999;

    .contact-button {
        display: flex;
        align-items: center;
        padding: 15px;
        border-radius: 100px;
        margin-bottom: 20px;
        transition: width 0.4s ease;
        width: 30px;

        .icon {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .text {
            width: 0;
            overflow: hidden;
            white-space: nowrap;
            transition: width 0.4s ease;
        }

        svg {
            height: 32px;
        }

        &.open {
            width: 220px;

            .text {
                width: auto;
                max-width: 160px;
            }
        }

        &:not(.open) {
            justify-content: center;

            .icon {
                margin-right: 0;
            }
            .text {
                max-width: 0;
            }
        }
    }
}