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

@layer vetools {
	.dm-time__ {
		&btn-time {
			width: 20px;
		}

		&btn-time--top {
			border-bottom: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		&btn-time--bottom {
			border-top: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		&sep-time {
			font-size: 32px;
			position: relative;
			top: -2px;
		}

		&ipt-time {
			width: 20px;
			font-size: 20px;
			font-weight: bold;
		}

		&bar-clock {
			height: calc(100% - 8px);
			margin: 4px 8px;
			flex-shrink: 0;
			border-left: 1px solid vars.$rgb-border-grey;
		}

		&btn-day {
			width: 16px;
		}

		&wrp-weather {
			width: 100px;
		}

		&btn-weather {
			width: 34px;
			padding: 0;
			font-size: 21px;
			text-align: center;
			height: 33px;
			line-height: 33px;
		}

		&btn-random-weather {
			border: 0;
			padding: 0;
		}

		&ipt-weather {
			width: 40px;
		}

		&btn-date-adjust {
			width: 27px;
			padding: 1px 3px;
			flex-shrink: 0;
			flex-grow: 0;
		}

		&disp-calendar-day {
			cursor: pointer;
			text-align: center;
			border: 1px solid vars.$rgb-border-grey;
			border-radius: 3px;
			padding: 0 2px;
			font-size: 12px;
			line-height: 1.5;
			min-height: 21px;
			user-select: none;
		}

		&disp-calendar-day--active {
			background: vars-night.$rgb-stripe-grey--night;
		}

		&disp-day-entry {
			position: absolute;
			right: 2px;
			border-radius: 3px;
			width: 9px;
			height: 9px;
			line-height: 16px;
			font-weight: bold;
			font-size: 16px;
		}

		&disp-day-entry--event {
			top: 1px;
			color: #61adef;
		}

		&disp-day-entry--encounter {
			top: 10px;
			color: #5cb85c;
		}

		&disp-clock-entry {
			width: 12px;
			height: 12px;
			text-align: center;
			position: relative;
			font-size: 20px;
			top: -4px;
			font-weight: bold;
			cursor: pointer;
			user-select: none;
		}

		&disp-clock-entry--event {
			color: #61adef;
		}

		&disp-clock-entry--encounter {
			color: #5cb85c;
		}

		&disp-clock-entry--used-encounter {
			color: #8a8a8a; /* Desaturated green */
		}

		&wrp-clock-events {
			max-width: 100px;
		}

		&day-entry-header {
			font-size: 15px;
		}

		&day-entry-wrapper {
			max-height: 70%;
		}

		&spc-column-delete {
			width: calc(24px + 0.5rem);
		}

		&row-delete:only-child .ve-btn-danger {
			display: none;
		}

		&spc-button {
			display: none;
			width: 24px;
			height: 1px;
			flex-shrink: 0;
		}

		&row-delete:only-child .dm-time__spc-button {
			display: block;
		}

		&wrp-event-entries {
			box-shadow: none;
			border: 1px solid vars.$rgb-border-grey;
			border-radius: 3px;
			margin-top: 3px;
			margin-left: 6px;
			width: calc(100% - 6px);
		}

		&bar-entry {
			margin: 0 4px;
			border-left: 1px solid vars.$rgb-border-grey;
		}

		&wind-speed {
			font-size: 10px;
		}

		&ipt-color-moon {
			width: 22px;
		}

		&spc-drag-header {
			width: 14px;
		}

		&disp-day-moon {
			position: absolute;
			top: 1px;
			left: 1px;
		}

		&cvs-moon {
			border-radius: 50%;
		}

		&clock-moon-phase {
			width: 16px;
			height: 16px;
		}

		&calendar-moon-phase {
			width: 8px;
			height: 8px;
			margin-bottom: 1px;
			line-height: 8px;
		}

		&calendar-moon-phase .glyphicon {
			top: 0;
			font-size: 8px;
		}

		&calendar-moon-phase:last-child {
			margin-bottom: 0;
		}

		&calendar-ipt-date {
			background: transparent;
		}

		&calendar-ipt-date--slashed-right {
			border-right: 0;
		}

		&calendar-ipt-date--slashed-left {
			border-left: 0;
		}

		&calendar-date-sep {
			margin-right: -2px;
			margin-left: -2px;
			pointer-events: none;
			user-select: none;
		}

		&ipt-event-time {
			width: 40px;
		}
	}

	.ve-night-mode .dm-time__ {
		&bar-clock {
			border-color: vars-night.$rgb-border-grey--night;
		}

		&disp-calendar-day {
			border-color: vars-night.$rgb-border-grey--night;
		}

		&disp-day-entry--event,
		&disp-clock-entry--event {
			color: #7398b7;
		}

		&disp-day-entry--encounter,
		&disp-clock-entry--encounter {
			color: #64cc64;
		}

		&disp-clock-entry--used-encounter {
			color: #989898; /* Desaturated night green */
		}

		&wrp-event-entries {
			border-color: vars-night.$rgb-border-grey--night;
		}

		&bar-entry {
			border-color: vars-night.$rgb-border-grey--night;
		}

		&cvs-moon {
			border: 1px solid vars-night.$rgb-border-grey--night;
		}

		&calendar-ipt-date {
			background: transparent;
		}
	}
}
