// Form input styles
%form-field {
    background: $light;
    border: $base-border;
    display: block;
    font-family: $main-font;
    font-size: 1rem;
    line-height: 1.2rem;
    margin: 0 0 1rem 0;
    resize: none;
    padding: .8rem;
    position: relative;
    width:100%;

    &:focus {
        background:darken($light, 2%);
    }

    @include breakpoint(small) {
        float: left;
        width: 67%;
    }
}

// Colorbox buttons
$cbox-button-height:25px;
$cbox-button-width:25px;

%cbox-button {
    background: $primary;
    height: rem($cbox-button-height);
    width: rem($cbox-button-width);
    position: absolute;
    @include hide-text();
    border: 0;
    margin: 0;
    padding: 0;

    &:hover {
        background: $secondary;
    }
}

%cbox-button-before {
    @extend .icon;
    color: $light;
    font-size: em(16px);
    height: 100%;
    width: 100%;
    position: absolute;
    text-indent: 0;
    @extend %cbox-transition;
    left: 0;
    top:50%;
    margin-top:rem(-6px);
}


%cbox-transition {
    transition: 500ms;
}

%cbox-wrappers {
    box-sizing: content-box;
}


// Styles for slideshow pseudo elements
%controls-pseudo {
    @extend .icon;
    text-indent: 0;
    display: block;
    color: $light;
    font-size: rem(24px);
    text-align: center;
    line-height: 2rem;
}


// Optimize text kerning
%optimized-rendering {
    text-rendering: optimizeLegibility;
}

// Animations
%animated-transform {
    transition: 300ms;
}

%animation{
    transition:all.3s ease;
    -webkit-transition:all.3s ease;
    -moz-transition:all.3s ease;
    -o-transition:all.3s ease;
    -ms-transition:all.3s ease;
}