.home-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-s-x);

    &__restart-button,
    &__display-video-button {
        border-radius: min(0.75rem, 0.7vw);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding-left: var(--space-s-x);
        padding-right: var(--space-s-x);
        transition: border-color 0.3s ease;

        &:hover {
            border: 1px solid rgba(255, 255, 255, 0.4);
        }
    }

    &__video-icon {
        max-width: 2.3vw;
        transition: all 0.3s ease;

        &:hover {
            scale: 1.1;
        }

        &:active {
            transform: scale(0.9);
        }
    }

    &__redo-icon {
        max-width: 2.3vw;
        transition: transform 0.3s ease, rotate 0.3s ease;

        &:hover {
            rotate: -90deg;
        }

        &:active {
            transform: scale(0.9);
        }
    }
}