
//****************************************************************************************************
//******************************************Generic Classes*******************************************
//****************************************************************************************************

// Import statements
@import '_variables';

// Generic classes which don't necessarily fit in any other files.

// To be loaded with _variables.scss before any standard file.


@mixin display-flex {
    display: -webkit-flex;
    display: flex;
}

@mixin flex-direction($value) {
    -webkit-flex-direction: $value;
    flex-direction: $value;
}

@mixin flex-grow($value) {
    -webkit-flex-grow: $value;
    flex-grow: $value;
}

@mixin order($value) {
    -webkit-order: $value;
    order: $value;
}

@mixin justify-content($value) {
    -webkit-justify-content: $value;
    justify-content: $value;
}

@mixin align-content($value) {
    -webkit-align-content: $value;
    align-content: $value;
}

@mixin flex-wrap($value) {
    -webkit-flex-wrap: $value;
    flex-wrap: $value;
}

@mixin align-items($value) {
    -webkit-align-items: $value;
    align-items: $value;
}

@mixin flex-basis($value) {
    -webkit-flex-basis: $value;
    flex-basis: $value;
}

@mixin flex-shrink($value) {
    -webkit-flex-shrink: $value;
    flex-shrink: $value;
}

@mixin align-self($value) {
    -webkit-align-self: $value;
    align-self: $value;
}

// Sizes for nav icons.
@mixin nav-img-size {
    width: auto;
    max-width: 40px;
    max-height: 40px;
    padding-right: 5px;

    @media (max-width: $tablet-mid) {
        max-width: 30px;
    }

    @media (max-width: $phone-max) {
        max-width: 25px;
    }
}


//****************************************************************************************************
//****************************************************************************************************
//***************************************Reusable Generic Classes*************************************
//****************************************************************************************************
//****************************************************************************************************

//**************************************************
//START Placeholder Class Block
//**************************************************
// These are NOT directly referenced withinin html.
// These are great in theory, but due to how sass compiles with the "extend" property, they're less
// than ideal in practice. If you use the extend property frequently, it has a tendency to clutter
// browser style view tabs with repeated css. Use sparingly.

//*************************
//START Centering Subblock
//*************************

// Center flex content.
%flex-center {
    @include display-flex;              // Display as flex.
    @include justify-content(center);    // Main axis alignment.
    @include align-items(center);        // Cross axis alignment.
}

%divider-padding {
    @media (max-width: $phone-max) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    @media (min-width: $phone-max) and (max-width: $laptop-max) {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    @media (min-width: $tablet-max) and (max-width: $laptop-max) {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    @media (min-width: $laptop-max) {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

//*************************
//END Centering Subblock
//*************************

//**************************************************
//END Placeholder Class Block
//**************************************************
