.show-on-mobile {

@include on-tablet {
    display: none !important;
}
@include on-desktop {
    display: none !important;
}

}

.button-group {

// Spacing
margin: $spacing-3 0pt;

// Flexbox
display: flex;
flex-direction: row-reverse;
justify-content: center;
@include not-on-mobile {
    justify-content: flex-start;
}

// Buttons in Group
.button {
    flex: 1;
    @include not-on-mobile {
        flex: 0 auto;
    }
}

}

.button {

// Spacing
margin: 0pt $spacing-1;
padding: $spacing-2 $spacing-3;

// Text
text-align: center;
text-decoration: none;

// Shape
border: none;
border-radius: 4pt;

// Color
@include with-theme {
    background-color: color-for(primary);
    color: color-for(text-on-primary);
}

}

.button-sec {

@extend .button;

// Color
@include with-theme {
    background-color: color-for(secondary);
    color: color-for(text-on-secondary);
}

}

.button-ter {

@extend .button;

// Color
@include with-theme {
    background-color: color-for(tertiary);
    color: color-for(text-on-tertiary);
}

}

.button-quat {

@extend .button;

// Color
@include with-theme {
    background-color: color-for(quaternary);
    color: color-for(text-on-quaternary);
}

}

.icon-button {

// Spacing and sizing
margin: $spacing-1;
padding: $spacing-2;
font-size: $icon-font-size;

// Align with center
display: flex;
align-items: center;
justify-content: center;

// Styling 
background: none;
border: none;
@include with-theme {
    color: color-for(primary)
}

}

.icon-button-sec {

@extend .icon-button;

// Color
@include with-theme {
    color: color-for(secondary);
}

}

.icon-button-ter {

@extend .icon-button;

// Color
@include with-theme {
    color: color-for(tertiary);
}

}

.icon-button-quat {

@extend .icon-button;

// Color
@include with-theme {
    color: color-for(quaternary);
}

}