.sg-header {
    @include position(fixed, 0 0 auto);
    background: $color-grey-dark-tertiary;
    color: $color-white;
    padding: 14px 0;
    z-index: 999;
    @include transition(background 0.3s);

    .sg-page-wrapper {
        @extend .clearfix;
        position: relative;
    }

    .sg-logo {
        background: 0;
        border: 0;
        float: left;
        line-height: 1;
        margin-right: 10px;
        outline: 0;
        position: relative;

        a {
            display: block;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .sg-logo:after {
        content: 'Saved';
        @include position(absolute, 0 null null 100%);
        color: #38a55d;
        font-weight: 700;
        font-size: 18px;
        margin: 8px 0 0 10px;
        border-left: #38a55d solid 1px;
        padding-left: 10px;
        opacity: 0;
        @include transition(opacity 0.3s);
        @include transition-delay(0.2s);
    }

    &.have-message {
        animation: bg-color 1.5s ease-out;

        .sg-logo:after {
            opacity: 1;
        }
    }
}

@-webkit-keyframes bg-color {
    0%      {background: $color-grey-dark-tertiary;}
    20%     {background: #38a55d;}
    30%     {background: #38a55d;}
    100%    {background: $color-grey-dark-tertiary;}
}

.sg-header-nav {
    float: right;
    position: relative;
}

// Size Controls
.sg-snippets-resize {
    @include position(absolute, 0 auto auto 50%);
    @include transform(translateX(-50%));
    z-index: 10;

    .label-new-size {
        @include position(absolute, 0 32px auto auto);
        color: $color-white;
        line-height: 28px;
        vertical-align: middle;
    }

    .input-new-size {
        background: none;
        border: transparent solid 2px;
        border-radius: 16px;
        box-sizing: border-box;
        float: left;
        height: 32px;
        line-height: 28px;
        overflow: hidden;
        padding:0 50px 0 10px;
        text-align: right;
        vertical-align: middle;
        white-space: nowrap;
        width: 105px;
        @include transition(all .2s ease-out);

        &:active,
        &:focus {
            border-color: $color-blue;
            box-shadow: none;
            outline: none;
        }
    }

    .btn-dropdown {
        @include position(absolute, 0 0 null null);

        &:after {
            margin-left: 0;
        }
    }
}

.dropdown-list.active ~ .input-new-size {
    border-color: $color-blue;
}

.sg-snippets-controls {
    float: right;
    position: relative;

    .server-on & {
        display: block;
    }

    .dropdown-list {
        left: auto;
        right: 0;
        @include transform(translateY(-15px) translateX(0));

        &.active {
            @include transform(translateY(0) translateX(0));
        }

        ul {
            &:before {
                left: auto;
                right: 10px;
            }
        }
    }

    html:not([class]) & {
        display: none;
    }
}

// Btn new
.btn-new {
    background: transparent;
    @include transition(all .3s);
    border: 2px solid $color-blue;
    border-radius: 16px;
    box-sizing: border-box;
    color: $color-blue;
    float: right;
    height: 32px;
    line-height: 28px;
    margin-left: 20px;
    padding: 0 15px;
    position: relative;
    font: {
        size: 14px;
        weight: 400;
    };
    vertical-align: middle;

    &:hover {
        background: rgba($color-blue, 0.2);
    }

    &:active,
    &:focus {
        box-shadow: none;
        outline: none;
    }

    html:not([class]) & {
        display: none;
    }
}

// Dropdown List
.dropdown-list {
    @include position(absolute, 44px null null 50%);
    @include transition(all .2s ease-out);
    @include transform(translateY(-15px) translateX(-50%));
    background-color: $color-blue;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 10;

    &.active {
        @include transform(translateY(0) translateX(-50%));
        opacity: 1;
        pointer-events: all;
        visibility: visible;
    }

    ul {
        border-top: 3px solid #005D96;
        font-size: 14px;
        list-style: none;
        margin: 0;
        padding: 20px 0;
        position: relative;

        &:before {
            @include position(absolute, auto 0 100% 0);
            @include triangle(10px 4px, #005D96, up);
            content: '';
            margin: 0 auto 3px;
        }
    }

    li {
        padding: 2px 0;
    }

    button {
        background-color: transparent;
        border: 0;
        color: $color-white;
        display: block;
        letter-spacing: 1px;
        min-width: 100%;
        padding: 0 25px;
        text-align: left;
        font: {
            family: $font-main;
            weight: 400;
        };
        white-space: nowrap;
        @extend %remove-outline;

        &:hover {
            color: #00446D;
        }

    }
}