@use "../vars/vars";
@use "../vars/vars-night";

@layer vetools {
	.dm-init {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
	}

	.dm-init__wrp-header-outer {
		overflow-x: auto;
		display: flex;
		flex-direction: column;
	}

	.dm-init__wrp-header {
		flex: none;
		margin-bottom: 5px;
		display: flex;
		justify-content: space-between;
		font-variant: small-caps;
		border-bottom: 1px solid vars.$rgb-border-grey;
		min-width: min-content;
	}

	.dm-init__header {
		padding: 5px 0;
		width: 100%;
		text-align: center;
	}

	.dm-init__header--input {
		width: 40px;
		margin-right: 3px;
	}

	.dm-init__header--input-wide {
		width: 80px;
		margin-right: 3px;
	}

	.dm-init__spc-header-buttons {
		width: 52px;

		&--single {
			width: 32px;
		}
	}

	.dm-init__wrp-entries {
		overflow-y: scroll;
		min-width: min-content;
	}

	.dm-init__row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 3px;
	}

	.dm-init__row-lhs,
	.dm-init__row-rhs {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.dm-init__row-lhs {
		width: 100%;
		min-width: 115px;
	}

	.dm-init__row-mid {
		display: flex;
	}

	.dm-init__row-btn {
		line-height: 26px;
		padding: 1px 3px;
	}

	.dm-init__row-btn-flag,
	.dm-init__btn_eye {
		margin-right: 3px;
	}

	.dm-init__number {
		margin: 0 3px;
	}

	.dm-init__wrp-creature {
		display: flex;
		width: 100%;
		align-items: center;
		margin: 0 3px 0 0;
		padding-left: 5px;
		border: 1px solid vars.$rgb-border-grey;
	}

	.dm-init__btn-creature {
		padding: 1px 2px;
		line-height: 12px;
		font-size: 9px;
	}

	.dm-init__wrp-creature-link {
		display: flex;
		height: 20px;
		overflow: hidden;
	}

	.dm-init__row-input {
		height: auto;
		margin-right: 3px;
		padding: 5px 3px;
		border-radius: 0;
	}

	.dm-init__ipt-name {
		min-width: 50px;
	}

	.dm-init__ipt--rhs {
		width: 40px;
	}

	.dm-init__wrp-stat-cb {
		margin-right: 3px;
	}

	.dm-init__row-rhs input[type="number"]::-webkit-inner-spin-button,
	.dm-init__row-rhs input[type="number"]::-webkit-outer-spin-button {
		/* stylelint-disable-next-line property-no-vendor-prefix */
		-webkit-appearance: none;
		margin: 0;
	}

	.dm-init__row.dm-init__row-active input,
	.dm-init__row.dm-init__row-active .dm-init__wrp-creature,
	.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
		background: #cfe5ff78;
	}

	.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
		border-top: 1px solid vars.$rgb-border-grey;
		border-bottom: 1px solid vars.$rgb-border-grey;
	}

	.dm-init__wrp-controls {
		flex: none;
		height: 29px;
		padding: 3px;
		border-top: 1px solid vars.$rgb-border-grey;
		justify-content: space-evenly;
		display: flex;
	}

	.dm-init__rounds {
		width: 35px;
		height: vars.$h-ipt-xs;
		display: inline-block;
		border-radius: 0;
		padding: 0;
	}

	.dm-init__hp {
		width: 42px;
	}

	.dm-init__sep-fields-slash {
		position: absolute;
		pointer-events: none;
		top: 0;
		bottom: 0;
		left: calc(50% - 6px);
		width: 12px;
		color: #888;
	}

	.dm-init__stat_head {
		margin-right: 3px;
		padding: 5px 0;
		width: 40px;
		height: 20px;
		text-align: center;
		overflow: hidden;
	}

	.dm-init__stat_ipt {
		width: 40px;
		margin-right: 3px;
		padding: 5px 3px;
		border-radius: 0;
	}

	.dm-init-cond__ {
		&wrp-btns {
			max-width: 540px;
		}

		&btn-cond {
			min-width: 85px;
			color: #fff !important;
			outline: none !important;
		}
	}

	.ve-night-mode {
		.dm-init__wrp-header {
			border-color: vars-night.$rgb-border-grey--night;
		}

		.dm-init__wrp-controls {
			border-color: vars-night.$rgb-border-grey--night;
		}

		.dm-init__wrp-creature {
			border-color: vars-night.$rgb-border-grey--night;
		}

		.dm-init__row.dm-init__row-active input,
		.dm-init__row.dm-init__row-active .dm-init__wrp-creature,
		.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
			background: #8dc1ff20;
		}

		.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
			border-color: vars-night.$rgb-border-grey--night;
		}
	}
}
