.records{
	container-type: inline-size;
	container-name: records;

	header{
		form{
			display:flex;
			input[type=search]{
				flex:1;
			}
			button{
				margin:0;
			}
		}
	}

	ol{
		list-style-type:none;
		padding:0;
	}

	ol>li{
		background-color:var(--caccentbg);
		margin-bottom:1px;
		padding:.5rem 1rem;
		display:flex;
		flex-direction:column;
		max-width:100%;
		border:1px solid transparent;

		@container records (min-width: 500px) {
			flex-direction:row;
		}

		/* the two "columns", main and side*/
		.main{
			flex:1;
		}

		.title{
			font-size:110%;
		}
		.description{
			font-size:90%;
		}

		dl.metas{
			gap:0.2rem 0;
			margin:0;

			dt{
				font-weight:normal;
				font-size:80%;
				opacity:0.8;
				padding-right:.7rem;

				.icon{
					font-family:'Material Symbols Outlined';
				}
			}
			dt,dd{
				border-bottom:1px solid var(--caccent);
				&:last-child,&:nth-last-child(2){
					border-bottom:none;
				}
			}
		}

		&:hover{
			background:var(--cbgmain);
			border:1px solid var(--caccent);
		}
		&:nth-child(odd){
			background:color-mix(in srgb, var(--caccentbg) 70%, var(--cbgmain));
			&:hover{
				background:var(--cbgmain);
			}
		}
	}

	.filters-dialog{
		position:fixed;
		background:var(--caccentbg);
		padding:.5rem 1rem;
		border:1px solid var(--caccent);
		border-radius:3px;
		box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
		z-index:20;

		display:none;
		&[aria-expanded=true]{
			display:block;
		}

		.filters{
			display:grid;
			align-items:center;
			gap:1px 4px;
			grid-template-columns:auto auto auto auto;
			input[type=text],select{
				padding:0;
				width:7rem;
			}
		}
	}

	.search{
		display:inline-block;
		width:14rem;
	}

	.filter-button{
		&:before{
			content:'filter_alt';
			display:inline-block;
			font-family: 'Material Symbols Outlined';
			font-size:120%;
			vertical-align:bottom;
		}
	}

	.sort{
		display:flex;
		gap:1px;
		width:6rem;
		button{
			flex:1;
			padding:0;
			font-size:90%;
			font-family:'Material Symbols Outlined';

			&.active{
				background-color:#5b9bff;
			}
			&:first-child{
				border-top-left-radius:1rem;
				border-bottom-left-radius:1rem;
				&:after{
					content:'arrow_drop_down';
				}
			}
			&:last-child{
				border-top-right-radius:1rem;
				border-bottom-right-radius:1rem;
				&:after{
					content:'arrow_drop_up';
				}
			}
		}
	}

	.actions{
		display:flex;
		margin:.5rem 0;
		justify-content:flex-end;

		a{
			font-size:90%;
			margin:0;
			padding:0 .5rem;
			border-right:1px solid rgba(0, 0, 0, 0.2);

			&:hover{
				z-index:1;
			}
			&:first-child{
				border-top-left-radius:4px;
				border-bottom-left-radius:4px;
			}
			&:last-child{
				border-top-right-radius:4px;
				border-bottom-right-radius:4px;
				border-right:none;
			}
		}
	}
}