// Visually hide an element
%visuallyhidden {
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

// Linear gradient using $primary-color
%primary-color-gradient {
    background: $primary-color;
    background: -moz-linear-gradient( top, $primary-color 0%, $primary-lighten-color 100%);
    background: -webkit-linear-gradient( top, $primary-color 0%, $primary-lighten-color 100%);
    background: linear-gradient( to bottom, $primary-color 0%, $primary-lighten-color 100%);
}

// Linear gradient using $secondary-color
%secondary-color-gradient {
    background: $secondary-color;
    background: -moz-linear-gradient( top, $secondary-color 0%, $secondary-darken-color 55%, $secondary-color 100%);
    background: -webkit-linear-gradient( top, $secondary-color 0%, $secondary-darken-color 55%, $secondary-color 100%);
    background: linear-gradient( to bottom, $secondary-color 0%, $secondary-darken-color 55%, $secondary-color 100%);
}

// Align center block element
%center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

%vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

// Clearfix
%clearfix {
    &:before,
    &:after {
        content: ' ';
        display: table;
    }
    &:after {
        clear: both;
    }
}

// Input
%clear-input {
    width: 100%;
    background: none;
    outline: none;
    box-shadow: none;
    border: 0;
}

%container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 3em;
    @include media('>xxl') {
        max-width: 1600px;
    }
}
