@mobile-breakpoint: 576px;

.buttonRow {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    .buttonRow__button + .buttonRow__button {
        padding-left: 1rem;
    }
    &--left {
        justify-content: left;
    }
    &--stretch {
        display: flex;
        justify-items: stretch;
        .buttonRow__button {
            flex: 1 1 0;
            button {
                width: 100%;
            }
            &:first-child {
                margin-right: 1rem;
            }
        }
        @media (max-width: @mobile-breakpoint) {
            flex-direction: column;
            .buttonRow__button {
                margin-bottom: 0.5rem;
                &:first-child {
                    margin-right: 0;
                }
                &:last-child {
                    padding-left: 0;
                }
            }
        }
    }
    &--mobile-50-50 {
        @media (max-width: @mobile-breakpoint) {
            .buttonRow__button + .buttonRow__button {
                padding: 0;
            }
            .buttonRow__button {
                padding: 0;
                width: 50%;
                &:first-child {
                    padding-right: 0.25rem;
                }
                &:last-child {
                    padding-left: 0.25rem;
                }
                > .knapp {
                    height: 100%;
                    white-space: normal;
                    width: 100%;
                    padding-left: 1rem;
                    padding-right: 1rem;
                }
            }
        }
    }
}