/* 6.4 Buttons
----------------------------------------------------------*/

.btn {
    position: relative;
    font-family: $font-secondary;
    font-weight: 600;
    text-transform: uppercase;
    @include border-radius(0.2em);
    padding: 0.95rem 2rem 1.05rem;
    font-size: 0.8rem;
    @include transition-primary;
    outline: none;
    background: transparent;
    @include backface-visibility(hidden);
    cursor: pointer;

    &:hover, &:focus, &:active, &:focus:active {
        outline: none;
        @include translateY(-2px);
        @include box-shadow(none);
    }

    > span {
        position: relative;
        z-index: 2;
    }

    i {
        position: relative;
        top: 1px;
        @include opacity(0.5)

        > i {
            display: inline-block;
            @include transition(transform 0.2s ease-out, opacity 0.2s ease-out);
        }
    }

    img {
        height: 1em;
        position: relative;
        top: -0.05em;
        display: inline-block;
        vertical-align: middle;
    }
}

/* Sizes */

.btn-lg {
    padding: 1.5rem 3rem 1.5rem;
    font-size: 0.9rem;
    @include border-radius(0.2em);

    @media #{$screen-xs} {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.btn-sm {
    padding: 0.6rem 1rem 0.7rem;
    font-size: 0.75rem;
    @include border-radius(0.2em);
}

/* Types */

$k: 1;
@for $i from 1 through length($colorVersions)/2 {
    $type: nth($colorVersions,$k);
    $color: nth($colorVersions,$k+1);

    &.btn-#{$type} {
        border-color: $color;
        background-color: $color;
        color: #fff;

        @if $type == "secondary" {
            color: $color-global;
        } @else {
            color: #fff;
        }

        &:hover, &:focus, &:active, &:focus:active {
            @if $type == "secondary" {
                $color: $color-primary;
            }

            border-color: shade($color,10%);
            background-color: shade($color,10%);
            color: #fff;
        }
    }
    $k: $k+2;
}

.btn-white {
    background-color: #fff;
    border-color: #fff;
    color: $color-global;

    &:hover, &:focus, &:active, &:focus:active {
        background-color: $color-primary;
        border-color: $color-primary;
        color: #fff;
    }
}

.btn-link {
    color: inherit;

     &:hover, &:focus, &:active, &:focus:active {
        color: $color-primary;
        text-decoration: none;
    }
}

$k: 1;
@for $i from 1 through length($colorVersions)/2 {
    $type: nth($colorVersions,$k);
    $color: nth($colorVersions,$k+1);

    &.btn-outline-#{$type} {
        border-color: $color;
        color: inherit;

        &:before {
            background-color: $color;
        }

        &:hover, &:focus, &:active, &:focus:active {
            @if $type == "secondary" {
                color: $color-global;
            } @else {
                color: #fff;
            }
            border-color: $color;
            background-color: $color;
        }
    }
    $k: $k+2;
}

.btn-group {
    > .btn:first-child:not(:last-child) {
        @include border-bottom-right-radius(0);
        @include border-top-right-radius(0);
    }
    > .btn:last-child:not(:first-child) {
        @include border-bottom-left-radius(0);
        @include border-top-left-radius(0);
    }
    > .btn:not(.btn-link):not(:first-child) {
        border-left: 1px solid rgba(#fff,0.2);
    }
    > .btn-secondary:not(:first-child) {
        border-left-color: $color-line-light !important;
    }
    > .btn-dark:not(:first-child) {
        border-left-color: $color-line-light !important;
    }

    .btn-outline-primary + .price {
        background-color: $color-primary;
        color: #fff;
    }

    .btn {
        &:hover, &:focus {
            @include translateY(0);
        }
    }

    .price {
        font-family: $font-secondary;
        font-weight: 400;
        text-transform: uppercase;
        padding: 0.75rem 1rem 1rem;
        @include transition-primary;

        &.price-lg {
            padding: 1.5rem 1rem 1.75rem;
            font-size: 1.2rem;
        }
    }
}

/* Submit Button */

.btn-submit {

    .description {
        @include transition-primary;
    }

    .success, .error {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        visibility: hidden;
        @include transition-primary;
    }

    .success {
        top: 0;
        bottom: 0;
    }

    svg {
        position: absolute;
        top: calc(50% - 1.25rem);
        left: calc(50% - 1.25rem);
        height: 2.5rem;
        width: 2.5rem;
    }

    &.loading {
        -webkit-pointer-events: none;
        pointer-events: none;
    }

    &.success, &.error {
        .description {
            visibility: hidden;
            @include opacity(0);   
        }
    }

    &.success {
        .success {
            @include opacity(1);
            visibility: visible;

            > svg > path {
                stroke-dashoffset: 0;
                @include transition(all 0.3s ease-out 0.25s);
            }
        }
    }

    &.error {
        background-color: $color-medium;
        border-color: $color-medium;

        .error {
            @include opacity(1);
            visibility: visible;
        }
    }
}

/* Play Button */

.btn-play {
    @include button-clear;
    position: relative;
    display: inline-block;
    font-size: 52px;
    width: 92px;
    height: 92px;
    vertical-align: middle;
    @include border-radius(50%);

    &:before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        @include border-radius(50%);
        background-color: #fff;
        @include transition-secondary;
        @include box-shadow(0 0 45px 0 rgba(#000,0.1));
        content: ' ';
    }

    &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        @include translate3d(-50%,-50%,0);
        @include filter(blur(0));
        border-style: solid;
        border-width: 8px 0 8px 14px;
        border-color: transparent transparent transparent $color-global;
        content: ' ';
        @include transition-primary;
    }

    &:hover, &:focus, &:active, &:focus:active {
        outline: none;

        &:before {
            @include scale(1.3);
            @include opacity(1);
            visibility: visible;
        }
        &:after {
            border-color: transparent transparent transparent $color-primary;
        }
    }
}