@import "~scss/_mixins";

.inputWithFile {
	padding: 11px 13px; border-radius: 8px; border: solid 1px var(--color-shape-secondary); color: var(--color-control-active); @include text-common; 
	transition: border $transitionCommon; overflow: hidden; line-height: 20px; text-align: left; display: flex; align-items: center; gap: 0px 6px;
	white-space: nowrap;
}
.inputWithFile:hover { border-color: var(--color-shape-primary); }
.inputWithFile {
	.inputWithFile-inner { display: flex; align-items: center; flex-wrap: wrap; flex-grow: 1; width: calc(100% - 26px); }

	.fileWrap { display: inline-block; vertical-align: top; }
	.fileWrap .border { border-bottom: 0.05em solid var(--color-control-active); display: inline-block; line-height: 1; transition: $transitionAllCommon; }
	.fileWrap:hover .border { color: var(--color-text-primary); }

	.input-text { height: 20px; line-height: 20px; vertical-align: top; padding: 0px; border: 0px; color: var(--color-text-primary); }
	.input::placeholder { color: var(--color-control-active); }

	.urlToggle { cursor: text; display: inline-block; }
	.form { display: inline-block; vertical-align: top; }

	.icon { width: 20px; height: 20px; transition: none; flex-shrink: 0; }
	.icon.image { background-image: url('~img/icon/menu/action/block/media/image0.svg'); }
	.icon.video { background-image: url('~img/icon/menu/action/block/media/video0.svg'); }
	.icon.file { background-image: url('~img/icon/menu/action/block/media/file0.svg'); }
	.icon.audio { background-image: url('~img/icon/menu/action/block/media/audio0.svg'); }
	.icon.pdf { background-image: url('~img/icon/menu/action/block/media/pdf0.svg'); }
	.icon.bookmark { background-image: url('~img/icon/menu/action/block/bookmark0.svg'); }
}

.inputWithFile.isReadonly {
	.urlToggle { cursor: default; }
	.border { border: 0px; cursor: default; }
	.fileWrap:hover .border { color: var(--color-control-active); }
}

.inputWithFile.isSmall {
	.fileWrap { display: block; }
	.txt { height: 38px; }
}

.inputWithFile.noFile {
	.urlToggle { width: 100%; }
	.form { width: 100%; }
}
.inputWithFile.noFile.isSmall .txt { height: 20px; }

.inputWithFile.isFocused {
	.fileWrap { display: none; }
	.form { width: 100%; }
}

.inputWithFile.isSmall.isFocused {
	.txt { display: inline-block; }
	.fileWrap { display: block; }
}

.inputWithFile.isIcon {
	.inputWithFile-inner { display: none; }
}