.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);
    }
}