$bg: #3F3F3F;
$btn: #313131;
$btn-hov: #e39827;
$btn-act: #DB7900;
$inp: #818181;
$inp-act: #F0DAB2;
$inp-dis: #303030;
$inp-dis-col: #818181;
$item-shadow-color: #000;
$grid-bg: #242324;
$shadow-offset: 2px;
$shadow-blur: 2px;

* {
	box-sizing: border-box;
}

body {
/*	margin: 0;*/
	background: $bg;
	font-family: "Titillium Web", sans-serif;
	color: #ffffffee;
	font-weight: 600;
	font-size: 18px;
}

button {
	all: unset;
	display: inline-block;
    vertical-align: middle;
	padding: 2px;
	background-image: url("assets/item-button-9pr.png");
	background-repeat: no-repeat;
	background-origin: padding-box;
	background-position: center center;
	background-size: contain;
	//border-image-
	//background: $btn;
    //box-shadow:
    //	0 ( $shadow-offset) $shadow-blur #454545 inset,
    //	0 (-$shadow-offset) $shadow-blur #191919 inset,
    //	( $shadow-offset) 0 $shadow-blur #212121 inset,
    //	(-$shadow-offset) 0 $shadow-blur #212121 inset;
    //border-radius: 4px;

    &:hover {
		background-image: url("assets/item-button-hover.png");
    //	box-shadow:
    //		0 ( $shadow-offset) $shadow-blur #454545 inset,
    //		0 (-$shadow-offset) $shadow-blur #191919 inset,
    //		( $shadow-offset) 0 $shadow-blur #212121 inset,
    //		(-$shadow-offset) 0 $shadow-blur #212121 inset,
    //		0 0 5px #888 inset;
    //	background: $btn-hov;
    }

    &:active {
		background-image: url("assets/item-button-pressed.png");
    //	background: $btn-act;
    //	box-shadow:
    //		0 (-$shadow-offset+1) $shadow-blur #454545 inset,
    //		0 ( $shadow-offset+1) $shadow-blur #191919 inset,
    //		( $shadow-offset) 0 $shadow-blur #212121 inset,
    //		(-$shadow-offset) 0 $shadow-blur #212121 inset,
    //		0 0 5px #111 inset;
    }

    //&:focus-visible {
    //	outline: 2px solid white;
    //}

	f-item & {
		padding: 3px;
		margin: 1px;
	}
}

f-item img {
	width: 32px;
	height: 32px;
	object-position: 0 0;
	filter: drop-shadow(0 0 4px $item-shadow-color);

	object-fit: cover;
	display: block;
	vertical-align: middle;
	pointer-events: none;
}

f-grid {
	display: block;
	max-width: 400px;
	//background: $grid-bg;
	background-image: url("assets/empty-square-76x76.png");
	background-repeat: repeat;
	background-size: 40px 40px;
	f-row {
		display: block;
	}
}


input {
	all: unset;
	display: inline-block;
	background: $inp;
	padding: 2px;
	height: 32px;
	width: 64px;
    vertical-align: middle;
	text-align: center;
    color: black;
    font-weight: normal;
    font-size: 16px;
	box-shadow:
		0 (-$shadow-offset) $shadow-blur #454545 inset,
		0 ( $shadow-offset) $shadow-blur #191919 inset,
		( $shadow-offset) 0 $shadow-blur #212121 inset,
		(-$shadow-offset) 0 $shadow-blur #212121 inset;
    border-radius: 4px;

    &::selection {
    	background: $btn-hov;
    }

    &:focus {
    	background: $inp-act;
    }

    &:disabled {
    	background: $inp-dis;
    	color: $inp-dis-col;
    }
}

.spacer {
	display: inline-block;
	content: "";
	width: 32px;
}