/* FILE: e107_plugins/hpslovnik/css/slovnik-style.css
 *
 * Layout only. Colours, borders and button styling come from the site theme -
 * the pager buttons are given the theme's own .btn classes by the page script,
 * so nothing is repainted here.
 */

/* ---------------------------------------------------------------------------
 * Column toggles
 * ------------------------------------------------------------------------- */

.hps-toggles
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1rem;
	margin-bottom: 1rem;
}

.hps-toggles[hidden]
{
	display: none;
}

.hps-toggles-label
{
	font-weight: 600;
}

.hps-toggle
{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-weight: 400;
	white-space: nowrap;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Table
 * ------------------------------------------------------------------------- */

.hps-table
{
	width: 100%;
}

.hps-table > thead > tr > th
{
	white-space: nowrap;
}

.hps-table > tbody > tr > td
{
	vertical-align: top;
}

/* ---------------------------------------------------------------------------
 * DataTables wrapper
 *
 * The pager is styled here in full rather than borrowed from the theme. The
 * theme's .btn turned out to paint only .current and .disabled and left the
 * rest as bare text, so relying on it was dropped.
 *
 * Colours come from the custom properties below - override those, not the
 * rules, if this needs to follow a different palette.
 * ------------------------------------------------------------------------- */

#hps-table_wrapper
{
	--hps-pager-fg: #206bc4;
	--hps-pager-bg: #ffffff;
	--hps-pager-border: #dadfe5;
	--hps-pager-hover-bg: #f4f6fa;
	--hps-pager-active-bg: #206bc4;
	--hps-pager-active-fg: #ffffff;
	--hps-pager-muted: #9aa4b0;
	--hps-pager-radius: 4px;
}

#hps-table_wrapper::after
{
	content: "";
	display: table;
	clear: both;
}

#hps-table_wrapper .dataTables_length,
#hps-table_wrapper .dataTables_filter
{
	margin-bottom: .75rem;
}

#hps-table_wrapper .dataTables_length
{
	float: left;
}

#hps-table_wrapper .dataTables_filter
{
	float: right;
}

#hps-table_wrapper .dataTables_length select,
#hps-table_wrapper .dataTables_filter input
{
	display: inline-block;
	width: auto;
}

#hps-table_wrapper .dataTables_info
{
	float: left;
	padding-top: .55rem;
	font-size: .875rem;
}

/* Flex, not float + font-size:0. The old font-size hack closed the whitespace
   between the buttons but also swallowed the "..." separator, which is a plain
   span and not a .paginate_button. */
#hps-table_wrapper .dataTables_paginate
{
	float: right;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: .25rem;
}

#hps-table_wrapper .dataTables_paginate > span
{
	display: flex;
	align-items: center;
}

#hps-table_wrapper .paginate_button
{
	display: inline-block;
	margin: 0 0 0 -1px;
	padding: .35rem .7rem;
	border: 1px solid var(--hps-pager-border);
	background: var(--hps-pager-bg);
	color: var(--hps-pager-fg);
	font-size: .875rem;
	line-height: 1.35;
	text-decoration: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

#hps-table_wrapper .paginate_button:hover,
#hps-table_wrapper .paginate_button:focus
{
	background: var(--hps-pager-hover-bg);
	color: var(--hps-pager-fg);
	text-decoration: none;
}

#hps-table_wrapper .paginate_button.current,
#hps-table_wrapper .paginate_button.current:hover
{
	position: relative;
	z-index: 1;
	border-color: var(--hps-pager-active-bg);
	background: var(--hps-pager-active-bg);
	color: var(--hps-pager-active-fg);
	cursor: default;
}

#hps-table_wrapper .paginate_button.disabled,
#hps-table_wrapper .paginate_button.disabled:hover
{
	background: var(--hps-pager-bg);
	color: var(--hps-pager-muted);
	cursor: default;
	pointer-events: none;
}

/* Previous and Next are the first and last children of .dataTables_paginate,
   so the rounding sits on them and never on the numbers in between. */
#hps-table_wrapper .paginate_button.previous
{
	margin-left: 0;
	border-top-left-radius: var(--hps-pager-radius);
	border-bottom-left-radius: var(--hps-pager-radius);
}

#hps-table_wrapper .paginate_button.next
{
	border-top-right-radius: var(--hps-pager-radius);
	border-bottom-right-radius: var(--hps-pager-radius);
}

#hps-table_wrapper .dataTables_paginate .ellipsis
{
	margin-left: -1px;
	padding: .35rem .5rem;
	border: 1px solid var(--hps-pager-border);
	background: var(--hps-pager-bg);
	color: var(--hps-pager-muted);
	font-size: .875rem;
	line-height: 1.35;
}

/* Side by side needs room the phone does not have. */
@media (max-width: 575.98px)
{
	#hps-table_wrapper .dataTables_length,
	#hps-table_wrapper .dataTables_filter,
	#hps-table_wrapper .dataTables_info
	{
		float: none;
		text-align: center;
	}

	#hps-table_wrapper .dataTables_paginate
	{
		float: none;
		justify-content: center;
		padding-top: .75rem;
	}
}