<template>
    <div v-bind:class="{
        'sp-column': true,
        'sp-column--xlarge-1': this.xlarge === 1,
        'sp-column--xlarge-2': this.xlarge === 2,
        'sp-column--xlarge-3': this.xlarge === 3,
        'sp-column--xlarge-4': this.xlarge === 4,
        'sp-column--xlarge-5': this.xlarge === 5,
        'sp-column--xlarge-6': this.xlarge === 6,
        'sp-column--xlarge-7': this.xlarge === 7,
        'sp-column--xlarge-8': this.xlarge === 8,
        'sp-column--xlarge-9': this.xlarge === 9,
        'sp-column--xlarge-10': this.xlarge === 10,
        'sp-column--xlarge-11': this.xlarge === 11,
        'sp-column--xlarge-12': this.xlarge === 12,
        'sp-column--large-1': this.large === 1,
        'sp-column--large-2': this.large === 2,
        'sp-column--large-3': this.large === 3,
        'sp-column--large-4': this.large === 4,
        'sp-column--large-5': this.large === 5,
        'sp-column--large-6': this.large === 6,
        'sp-column--large-7': this.large === 7,
        'sp-column--large-8': this.large === 8,
        'sp-column--large-9': this.large === 9,
        'sp-column--large-10': this.large === 10,
        'sp-column--large-11': this.large === 11,
        'sp-column--large-12': this.large === 12,
        'sp-column--medium-1': this.medium === 1,
        'sp-column--medium-2': this.medium === 2,
        'sp-column--medium-3': this.medium === 3,
        'sp-column--medium-4': this.medium === 4,
        'sp-column--medium-5': this.medium === 5,
        'sp-column--medium-6': this.medium === 6,
        'sp-column--medium-7': this.medium === 7,
        'sp-column--medium-8': this.medium === 8,
        'sp-column--medium-9': this.medium === 9,
        'sp-column--medium-10': this.medium === 10,
        'sp-column--medium-11': this.medium === 11,
        'sp-column--medium-12': this.medium === 12,
        'sp-column--small-1': this.small === 1,
        'sp-column--small-2': this.small === 2,
        'sp-column--small-3': this.small === 3,
        'sp-column--small-4': this.small === 4,
        'sp-column--small-5': this.small === 5,
        'sp-column--small-6': this.small === 6,
        'sp-column--small-7': this.small === 7,
        'sp-column--small-8': this.small === 8,
        'sp-column--xsmall-1': this.xsmall === 1,
        'sp-column--xsmall-2': this.xsmall === 2,
        'sp-column--xsmall-3': this.xsmall === 3,
        'sp-column--xsmall-4': this.xsmall === 4
    }">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'SPColumn',
    props: {
        xlarge: Number,
        large: Number,
        medium: Number,
        small: Number,
        xsmall: Number
    }
}
</script>

<style scoped>
    .sp-column {
        box-sizing: border-box;
        flex: 1;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sp-column--xlarge-1 { max-width: 8.333%; min-width: 8.333%; }
    .sp-column--xlarge-2 { max-width: 16.666%; min-width: 16.666%; }
    .sp-column--xlarge-3 { max-width: 25%; min-width: 25%; }
    .sp-column--xlarge-4 { max-width: 33.333%; min-width: 33.333%; }
    .sp-column--xlarge-5 { max-width: 41.666%; min-width: 41.666%; }
    .sp-column--xlarge-6 { max-width: 50%; min-width: 50%; }
    .sp-column--xlarge-7 { max-width: 58.333%; min-width: 58.333%; }
    .sp-column--xlarge-8 { max-width: 66.666%; min-width: 66.666%; }
    .sp-column--xlarge-9 { max-width: 75%; min-width: 75%; }
    .sp-column--xlarge-10 { max-width: 83.333%; min-width: 83.333%; }
    .sp-column--xlarge-11 { max-width: 91.666%; min-width: 91.666%; }
    .sp-column--xlarge-12 { max-width: 100%; min-width: 100%; }
    
    @media (max-width: 1920px) {
        .sp-column--large-1 { max-width: 8.333%; min-width: 8.333%; }
        .sp-column--large-2 { max-width: 16.666%; min-width: 16.666%; }
        .sp-column--large-3 { max-width: 25%; min-width: 25%; }
        .sp-column--large-4 { max-width: 33.333%; min-width: 33.333%; }
        .sp-column--large-5 { max-width: 41.666%; min-width: 41.666%; }
        .sp-column--large-6 { max-width: 50%; min-width: 50%; }
        .sp-column--large-7 { max-width: 58.333%; min-width: 58.333%; }
        .sp-column--large-8 { max-width: 66.666%; min-width: 66.666%; }
        .sp-column--large-9 { max-width: 75%; min-width: 75%; }
        .sp-column--large-10 { max-width: 83.333%; min-width: 83.333%; }
        .sp-column--large-11 { max-width: 91.666%; min-width: 91.666%; }
        .sp-column--large-12 { max-width: 100%; min-width: 100%; }
    }
    
    @media (max-width: 960px) {
        .sp-column--medium-1 { max-width: 8.333%; min-width: 8.333%; }
        .sp-column--medium-2 { max-width: 16.666%; min-width: 16.666%; }
        .sp-column--medium-3 { max-width: 25%; min-width: 25%; }
        .sp-column--medium-4 { max-width: 33.333%; min-width: 33.333%; }
        .sp-column--medium-5 { max-width: 41.666%; min-width: 41.666%; }
        .sp-column--medium-6 { max-width: 50%; min-width: 50%; }
        .sp-column--medium-7 { max-width: 58.333%; min-width: 58.333%; }
        .sp-column--medium-8 { max-width: 66.666%; min-width: 66.666%; }
        .sp-column--medium-9 { max-width: 75%; min-width: 75%; }
        .sp-column--medium-10 { max-width: 83.333%; min-width: 83.333%; }
        .sp-column--medium-11 { max-width: 91.666%; min-width: 91.666%; }
        .sp-column--medium-12 { max-width: 100%; min-width: 100%; }
    }
    
    @media (max-width: 600px) {
        .sp-column--small-1 { max-width: 12.5%; min-width: 12.5%; }
        .sp-column--small-2 { max-width: 25%; min-width: 25%; }
        .sp-column--small-3 { max-width: 37.5%; min-width: 37.5%; }
        .sp-column--small-4 { max-width: 50%; min-width: 50%; }
        .sp-column--small-5 { max-width: 62.5%; min-width: 62.5%; }
        .sp-column--small-6 { max-width: 75%; min-width: 75%; }
        .sp-column--small-7 { max-width: 87.5%; min-width: 87.5%; }
        .sp-column--small-8 { max-width: 100%; min-width: 100%; }
    }
    
    @media (max-width: 480px) {
        .sp-column--xsmall-1 { max-width: 25%; min-width: 25%; }
        .sp-column--xsmall-2 { max-width: 50%; min-width: 50%; }
        .sp-column--xsmall-3 { max-width: 75%; min-width: 75%; }
        .sp-column--xsmall-4 { max-width: 100%; min-width: 100%; }
    }
</style>
