@mixin snippet-item-style ($height: 50px) {
    background: none;
    border: none;
    font-size: 16px;
    padding: 10px 0;
    width: 100%;
    text-align: left;
    color: #4d4d4d;
    box-sizing: border-box;
    height: $height;
    display: block;
    vertical-align: middle;
}

.sg-snippet-description {
    background: #f4f4f4;
    font: {
        family: $font-main;
        weight: 400;
        size: 16px;
    };

    .have-content {
        padding: 30px 220px 35px 40px;
        box-sizing: border-box;
        position: relative;

        &:before {
            content: '';
            @include position(absolute, 35px null null 0);
            width: 20px;
            height: 20px;
            background: sassvg('description', $color-blue) center/contain no-repeat;
        }
    }
}

.sg-snippet-settings {

    padding: {
        top: 50px;
        bottom: 50px;
    };

    .sg-page-wrapper {
        @include clearfix();
    }

    .sg-sidebar {
        float: left;
        width: 25%;
    }

    .sg-content {
        float: right;
        width: 75%;
    }

    .sg-snippet-item {
        border-bottom: #cccccc solid 1px;
    }

    .field-text {
        @include snippet-item-style();
    }

    .field-select {
        @include snippet-item-style();
    }

    .sg-btn {
        @include snippet-item-style();
    }
}

.sg-snippet-menu {

    &-item {
        border-bottom: 1px solid #ccc;
        position: relative;

        &.is-active {

            &::before {
                content: '';
                margin-top: -12px;
                position: absolute;
                right: -20px;
                top: 50%;
                @include triangle(24px, #3b3b3b, left);
            }

            .sg-snippet-menu-action {
                padding-left: 45px;
            }
        }
    }

    &-action {
        @include appearance(none);
        @include transition(all 0.3s);
        background-color: transparent;
        border: 1px solid transparent;
        box-sizing: border-box;
        color: #4d4d4d;
        display: inline-block;
        font-size: 16px;
        height: 50px;
        padding: 0;
        width: 100%;
        text-align: left;

        &:focus {
            outline: 0;
        }

        &-desc {
            background: sassvg('description', $color-blue) left center no-repeat;
            padding: 0 0 0 35px;
        }

        &-css {
            background: sassvg('code-css', $color-blue) left center no-repeat;
            padding: 0 0 0 35px;
        }

        &-html {
            background: sassvg('code-html', $color-blue) left center no-repeat;
            padding: 0 0 0 35px;
        }

        &-delete {
            background: sassvg('trash', $color-red) left center / 16px no-repeat;
            padding: 0 0 0 35px;
        }
    }

    &-tab {
        display: none;

        &.is-active {
            display: block;
        }
    }

    &-controls {
        padding-top: 20px;
    }

    .field-text {
        @include snippet-item-style(40px);
        margin-bottom: 10px;
        @include transition(all 0.3s);

        &:focus {
            background: #F7F7F7;
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .field-select {
        @include snippet-item-style();
        background: sassvg('angle-arrow-down', #989898) right center / 12px no-repeat;
    }

    .snippet-settings & {
        .checkbox-wrapper  {
            font-size: 16px;
            left: 0;
            position: relative;

            label {
                padding: 14px 0 9px;
                width: 100%;
                cursor: pointer;
            }
        }
    }

    .tooltip {
        @include position(absolute, 50% 0 auto auto);
        margin-top: -9px;
    }
}

.sg-snippet-controls {

    .field-textarea,
    .editor-view {
        height: 375px;
    }

    .field-textarea {
        background-color: #3b3b3b;
        color: #fff;

        &:focus {
            border: none;
        }
    }

    .ace_print-margin {
        display: none;
    }
}

.ace_scrollbar,
.sg-snippet-code-preview {
    &::-webkit-scrollbar {
        background: #323232;
    }
    &::-webkit-scrollbar-thumb {
        background: #5D5D5D;
    }
}