/*!
 *  Ink：编辑器前端样式
 */

/*
 * 深浅色定义变量
 */

	:root,[data-color-mode=light] {

		/*全局颜色*/
		--color-shortcode-bg:#dddddd44;
		--color-shortcode-text:#555555;
		--color-shortcode-border:#555555;
        --color-shortcode-tabs-bg:#FBFBFB;
        --color-shortcode-tabs-bar:#F7F7F7;
        --color-shortcode-tabs-border:rgba(222,229,231,.45);
        --color-shortcode-tabs-hover:#F3F3F3;
        --color-shortcode-opacity:1;
        --color-shortcode-shadow:0 4px 11px 0 #252c6117,0 1px 3px 0 #5d64940f;
	}
	[data-color-mode=dark] {

		/*全局颜色*/
		--color-shortcode-bg:#222222;
		--color-shortcode-text:#dddddd87;
		--color-shortcode-border:#f0f0f087;
        --color-shortcode-tabs-bg:#232323;
        --color-shortcode-tabs-bar:#202020;
        --color-shortcode-tabs-border:#252525;
        --color-shortcode-tabs-hover:#252525;
        --color-shortcode-opacity:0.60;
        --color-shortcode-shadow:0 4px 11px 0 rgb(0 0 0/20%),0 1px 3px 0 rgb(0 0 0/20%);

	}
/* 引用文章 */
	.x,.x-post {
		display:flex
	}
	.x-post {
		background:var(--color-shortcode-bg);
		border-radius:5px;
		flex-direction:row;
		border:1px dashed var(--color-shortcode-border);
		box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.15);
	}
	.x-post .text-content {
		flex:1 1 auto;
		margin: 20px 10px 20px 30px;
	}
	.x-post .text-content .title {
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		display:-webkit-box;
		font-size:1.5rem!important;
		font-weight:700;
		margin-bottom:.5em;
		overflow:hidden;

	}
	.x-post .text-content .title a {
		color:var(--color-shortcode-text);
		font-size:inherit;
		font-weight:inherit
	}
	.x-post .text-content .content {
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		display:none;
		margin-bottom:.3em;
		overflow:hidden
	}
	.x-post .text-content>.button {
		display:none
	}
	.x-post .text-content a {
		text-decoration:none
	}
	.x-post .text-content a .content {
		height:auto
	}
	.x-post .media-content {
		flex:1 0 auto;
		max-width:250px;
		padding-right:0;
		position:relative;
		border-left: 1px dashed var(--color-shortcode-border);
	}
	.x-post .media-content:after {
		content:"";
		display:block;
		padding-top:62.5%
	}
	.x-post .media-content a {
		background-color:hsla(0,0%,47%,.1);
		background-position:50% 50%;
		background-repeat:no-repeat;
		background-size:cover;
		border:0;
		border-radius:inherit;
		bottom:0;
		left:0;
		position:absolute;
		right:0;
		top:0
	}
	.x-post .media-content img {
		border-radius:5px;
		display:block;
		height:100%;
		-o-object-fit:cover;
		object-fit:cover;
		right:0;
		top:0;
		width:100%;
		margin:0;
		opacity: .66;
		filter: grayscale(.75);
	}

/* 隐藏内容 */
	.shortcode-hide {
		background:repeating-linear-gradient(145deg,#f2f2f2,#f2f2f2 15px,#fff 0,#fff 30px);
		color: #444444;
		border-radius:5px;
		padding:20px;
		opacity: .60;
		box-shadow: 0 4px 11px 0 #252c6117,0 1px 3px 0 #5d64940f;
	}
	.shortcode-hide a{
		color: #444444!important;
	}
	.already-shown {
		background:var(--color-shortcode-bg);
		position: relative;
	}
	.already-shown::after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 100%;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		opacity: .44;
		background:repeating-linear-gradient(145deg,#333333,#333333 15px,#555555 0,#555555 30px);
	}
	.shortcode-hide>br:first-child,.shortcode-hide>br:last-child {
		display:none
	}
	.shortcode-hide a {
		color:var(--theme,#0d6efd);
		transition:all .2s
	}
	.shortcode-hide a:hover {
		text-decoration:underline
	}

/* 哔哩哔哩视频框架 */
	x-bilibili,x-player {
		display:block;
		margin:10px 10%;
		width:80%;
		text-align: center;
	}
	x-bilibili iframe,x-player iframe {
		border:0;
		height:450px;
		width:100%;
		border-radius: 5px;
		display: block;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
	}

/* 多标签栏 */
	x-tabs {
		background-color:var(--color-shortcode-tabs-bg);
		display:flex;
		flex-direction:column;
		width:100%;
        box-shadow: 0 2px 6px rgba(0,0,0,.1);
	}

	x-tabs>.tabs {
        background-color: var(--color-shortcode-tabs-bar);
        border-bottom: 1px solid var(--color-shortcode-tabs-border);
		display:flex;
		flex-wrap:wrap;
		gap:4px;
		list-style:none;
		margin-bottom:0;
		padding-left:0
	}

	x-tabs>.tabs>a {
        border: none!important;
		cursor:pointer;
		margin-bottom:-1px;
		padding:calc(.5em + 1px) 1rem .5em;
		text-decoration:none!important;
        transition: none!important;
        color: var(--color-shortcode-text);
	}

	x-tabs>.tabs>a:hover {
        background: var(--color-shortcode-tabs-hover)!important;
        color:inherit!important;
	}

	x-tabs>.tabs>a.active {
		cursor:default;
        border-bottom:2px solid var(--color-shortcode-border)!important;

	}

	x-tabs>.tabs>a.active:hover {
		color:inherit!important
	}

	x-tabs>.tabs>:not(a) {
		display:none
	}

	x-tabs>.cards {
		overflow:hidden;
		position:relative;
		width:100%
	}

	x-tabs>.cards>.card {
		border:1px solid var(--color-shortcode-tabs-border);
		border-top:1px solid transparent;
		display:none;
		padding:1em
	}

	x-tabs>.cards>.card.active {
		display:block
	}

/* 按钮 */
    .x-btn {
        border:1px solid transparent;
        border-bottom: none!important;
        border-radius:5px;
        display:table;
        transition:all .2s;
        opacity: var(--color-shortcode-opacity)!important;
    }

    .x-btn:not(.disabled):not(:disabled) {
        cursor:pointer
    }
    .x-btn .icon {
        background-color:rgba(0,0,0,.1);
        text-align:center
    }
    .x-btn .content,.x-btn .icon {
        display:table-cell;
        height:24px;
        padding:.25em .75em;
        vertical-align:middle
    }
    .x-btn .content {
        line-height:24px
    }
    .x-btn:hover {
        color:#fff;
        text-decoration:none
    }
    .x-btn-shadow {
        box-shadow:0 0 45px -5px hsla(0,0%,62%,.22)!important
    }
    .x-btn-group-sm>.btn,.x-btn-sm {
        font-size:.75rem;
        padding:.25rem .75rem
    }
    .x-btn-primary {
        background-color:#0d6efd;
        border-color:#0d6efd
    }
    .x-btn-primary.focus,.x-btn-primary:focus,.x-btn-primary:hover {
        background-color:#0b5ed7;
        border-color:#0a58ca;
        color:#fff
    }
    .x-btn-primary.focus,.x-btn-primary:focus {
        box-shadow:0 0 0 .25rem rgba(49,132,253,.5)
    }
    .x-btn-primary:not(:disabled):not(.disabled).active:focus,.x-btn-primary:not(:disabled):not(.disabled):active:focus {
        background-color:#222831;
        border-color:#222831;
        box-shadow:none;
        color:#fff!important
    }
    .x-btn-primary {
        color:#fff!important
    }
    .x-btn-primary.disabled,.x-btn-primary:disabled,.x-btn-primary:not(:disabled):not(.disabled).active,.x-btn-primary:not(:disabled):not(.disabled):active {
        background-color:#f1404b;
        border-color:#f1404b;
        color:#fff!important
    }
    .x-btn-secondary {
        background-color:#252c41;
        border-color:#252c41;
        color:#fff!important
    }
    .x-btn-secondary.focus,.x-btn-secondary:focus,.x-btn-secondary:hover,.x-btn-secondary:not(:disabled):not(.disabled).active:focus,.x-btn-secondary:not(:disabled):not(.disabled):active:focus {
        background-color:#222831;
        border-color:#222831;
        box-shadow:0 5px 20px -3px rgba(37,44,65,.33)!important;
        color:#fff!important
    }
    .x-btn-secondary.disabled,.x-btn-secondary:disabled,.x-btn-secondary:not(:disabled):not(.disabled).active,.x-btn-secondary:not(:disabled):not(.disabled):active {
        background-color:#222831;
        border-color:#222831;
        color:#f4f5f9!important
    }
    .x-btn-secondary .content {
        background-color:hsla(0,0%,100%,.1)
    }
    .x-btn-light {
        background-color:#f4f5f9;
        border-color:#f4f5f9;
        color:#252c41!important
    }
    .x-btn-light:hover {
        background-color:#222831;
        border-color:#222831;
        box-shadow:0 5px 20px -3px rgba(37,44,65,.33);
        color:#fff!important
    }
    .x-btn-light.focus,.x-btn-light:focus,.x-btn-light:not(:disabled):not(.disabled).active:focus,.x-btn-light:not(:disabled):not(.disabled):active:focus {
        background-color:#f4f5f9;
        border-color:#f4f5f9;
        box-shadow:none;
        color:#9d9fa9!important
    }
    .x-btn-light.disabled,.x-btn-light:disabled {
        background-color:#f1eff3;
        border-color:#f1eff3;
        color:#9d9fa9!important
    }
    .x-btn-light:not(:disabled):not(.disabled).active,.x-btn-light:not(:disabled):not(.disabled):active {
        background-color:#f4f5f9;
        border-color:#f4f5f9;
        color:#9d9fa9!important
    }
    .x-btn-info {
        background-color:#17a2b8;
        border-color:#17a2b8;
        color:#fff!important
    }
    .x-btn-info:hover {
        background-color:#138496;
        border-color:#117a8b
    }
    .x-btn-info:active {
        background-color:#117a8b;
        border-color:#10707f;
        color:#fff!important
    }
    .x-btn-info:focus {
        background-color:#138496;
        border-color:#117a8b;
        box-shadow:0 0 0 .2rem rgba(58,176,195,.5);
        color:#fff!important
    }
    .x-btn-success {
        background-color:#28a745;
        border-color:#28a745;
        color:#fff!important
    }
    .x-btn-success:hover {
        background-color:#218838;
        border-color:#1e7e34
    }
    .x-btn-success:active {
        background-color:#1e7e34;
        border-color:#1c7430;
        color:#fff!important
    }
    .x-btn-success:focus {
        background-color:#218838;
        border-color:#1e7e34;
        box-shadow:0 0 0 .2rem rgba(72,180,97,.5);
        color:#fff!important
    }
    .x-btn-warning {
        background-color:#ffc107;
        border-color:#ffc107;
        color:#212529!important
    }
    .x-btn-warning:hover {
        background-color:#e0a800;
        border-color:#d39e00;
        color:#212529!important
    }
    .x-btn-warning:active {
        background-color:#d39e00;
        border-color:#c69500;
        color:#212529!important
    }
    .x-btn-warning:focus {
        background-color:#e0a800;
        border-color:#d39e00;
        box-shadow:0 0 0 .2rem rgba(222,170,12,.5);
        color:#212529!important
    }
    .x-btn-rounded {
        border-radius:4rem;
        padding-left:1rem;
        padding-right:1rem
    }
    .x-btn-clipboard {
        background-color:#fff;
        border:1px solid;
        border-radius:.25rem;
        color:#007bff!important;
        font-size:65%;
        padding:.25rem .5rem
    }
    .x-btn-weibo:hover {
        background-color:#e24040;
        border-color:#e24040
    }
    .x-btn-weixin:hover {
        background-color:#20b767;
        border-color:#20b767
    }
    .x-btn-alipay {
        background-color:#0ae;
        border-color:#0ae
    }
    .x-btn-youku {
        background-color:#1f82fc;
        border-color:#1f82fc
    }
    .x-btn-toutiao {
        background-color:#ed4040;
        border-color:#ed4040
    }
    .x-btn-youtube {
        background-color:#ff0400;
        border-color:#ff0400
    }
    .x-btn-twitter {
        background-color:#1da1f2;
        border-color:#1da1f2
    }
    .x-btn-facebook {
        background-color:#365899;
        border-color:#365899
    }
    .x-btn-bilibili {
        background-color:#fb7299;
        border-color:#fb7299
    }
    .x-btn-ins {
        background-color:#ed4956;
        border-color:#ed4956
    }
    .x-btn-tumblr {
        background-color:#36465d;
        border-color:#36465d
    }

/* 折叠卡片 */
    .x-card {
        background:var(--color-shortcode-tabs-bg);
        display:block;
        margin:0 auto;
        position:relative
    }
    .x-card>.title {
        border:1px solid var(--color-shortcode-tabs-border);
        background-color: var(--color-shortcode-bg);
        border-radius:5px 5px 0 0;
        color:var(--color-shortcode-text);
        cursor:pointer;
        display:block;
        font-weight:500;
        font-weight:700;
        padding:.75em;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none
    }
    .x-card>.title:after {
        text-rendering:auto;
        border:solid var(--color-shortcode-text);
        border-width:0 3px 3px 0;
        content:"";
        display:inline-block;
        padding:3px;
        position:absolute;
        right:16px;
        top:16px;
        transform:rotate(-135deg);
        transform-origin:60% 70%;
        transition:transform .2s
    }
    .x-card>.content {
        border:1px solid var(--color-shortcode-tabs-border);
        border-top:1px solid transparent;
        color:#606266;
        padding:.75em;
        transform:rotateX(0deg);
        transition:all .3s,opacity .1s .2s,visibility .1s .3s
    }
    .x-card>.content>br:first-child {
        display:none
    }
    .x-card.fold>.title,.x-card:not(.fold) {
        box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)
    }
    .x-card.fold>.title:after {
        transform:rotate(45deg)
    }
    .x-card.fold>.content {
        height:0;
        padding:0;
        transform:rotateX(-90deg)
    }

/* 提示框 */
    .x-alert {
        box-shadow: var(--color-shortcode-shadow);
        color: var(--color-text-blockquote);
        border-left:5px solid;
        --text-opacity:1;
        margin:10px 8px;
        padding:15px;
        opacity: var(--color-shortcode-opacity)!important;
    }
    .x-alert:last-child {
        margin-bottom:0
    }
    .x-alert-primary {
        background-color:#cfe2ff;
        border-color:#b6d4fe;
        color:#084298
    }
    .x-alert-secondary {
        background-color:#e2e3e5;
        border-color:#d3d6d8;
        color:#41464b
    }
    .x-alert-success {
        background-color:#d1e7dd;
        border-color:#badbcc;
        color:#0f5132
    }
    .x-alert-danger {
        background-color:#f8d7da;
        border-color:#f5c2c7;
        color:#842029
    }
    .x-alert-warning {
        background-color:#fff3cd;
        border-color:#ffecb5;
        color:#664d03
    }
    .x-alert-info {
        background-color:#ebf7ff;
        border-color:#0fb0ff;
        color:#555555
    }
    .x-alert-light {
        background-color:#fefefe;
        border-color:#f6f5f4;
        color:#636464
    }
    .x-alert-dark {
        background-color:#d3d3d4;
        border-color:#bcbebf;
        color:#141619
    }

/* 选择框 */
    .x-checkbox {
        border:2px solid var(--color-shortcode-text);
        border-radius:2px;
        box-sizing:border-box;
        height:15px;
        margin:0 5px 0 0;
        position:relative;
        vertical-align:-2px;
        width:15px;
        display: inline-block;
    }

/* 链接卡片 */
    .x-link {
        display:flex!important;
        text-decoration:none!important;
    }
    .x-link>.x-link-backdrop {
        background-position:50%;
        background-repeat:no-repeat;
        background-size:cover;
        bottom:0;
        filter:blur(20px);
        left:0;
        position:absolute;
        right:0;
        top:0
    }
    .x-link>.x-link-content {
        align-items:center;
        background-color:var(--color-shortcode-bg);
        border-radius:inherit;
        display:flex;
        flex-grow:1;
        justify-content:space-between;
        padding:12px;
        position:relative
    }
    .x-link>.x-link-content>.title {
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        display:-webkit-box;
        flex-grow:1;
        font-size:16px;
        font-weight:500;
        line-height:1.25;
        max-height:40px;
        overflow:hidden;
        text-overflow:ellipsis
    }
    .x-link>.x-link-content>.icon {
        border-radius:4px;
        flex-shrink:0;
        margin-left:8px
    }
    .x-link>.x-link-content>.icon img {
        border-radius:inherit;
        display:block;
        height:48px;
        max-width:revert;
        -o-object-fit:cover;
        object-fit:cover;
        width:48px
    }

/* 音乐播放器 */
    .x-audio {
        width:100%;
        display: table;
    }

/* 链接与预览 */
    x-link {
        border-radius:4px;
        box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
        box-sizing:border-box;
        display:block;
        margin:1em auto;
        max-width:100%;
        overflow:hidden;
        position:relative;
        width:390px
    }
    #wmd-preview .x-btn {
        display:table
    }
    #wmd-preview .x-btn .content,#wmd-preview .x-btn .icon {
        display:table-cell
    }