// main: ../options.scss

.mts-opts-header {
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    .logo,
    .header-text {
        float: left;
    }
    .header-text {
        color: #888;
        @include padding( 11px null null 30px );
    }
    .header-community {
        font-size: 14px;
        float: right;
        margin-top: 14px;
    }

    .header-search {
        position: relative;
        float: right;
        @include margin( 8px 15px null null);
        input {
            font-size: 12px;
            width: 150px;
            -webkit-transition: width .3s ease-in;
            transition: width .3s ease-in;
            border-radius: 30px;
            @include padding( 6px 30px 6px 15px);
        }

        .dashicons {
            cursor: pointer;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            color: #666;
            @include position( absolute, 50% 10px null null );
        }

        .dashicons-no {
            display: none;
        }

        &.active input,
        input:focus {
            width: 250px;
            border-color: #ddd;
            box-shadow: none;
        }

        &.active {
            .dashicons-no {
                display: inline-block;
            }
            .dashicons-search {
                display: none;
            }
        }
    }
}
