@import "minerva.mixins";
@import "minerva.variables";

@paddingHorizontal: 24px;
@iconSize: 16px;
@iconHeadingGap: 12px;
@fontSize: @tocFontSize;

.client-js .toc-mobile {
	background-color: @colorGray15;
	border: solid 1px @grayLightest;

	.toc-button {
		float: left;
		display: block;
		font-size: @fontSize;
	}

	.collapsible-heading {
		visibility: visible;
		background-position: right center;

		// Override rules for section toggler
		// In table of contents the collapsing caret is on the right
		.indicator {
			margin: .2em .4em 0 0;
			float: right;
			font-size: .6em;
		}
	}

	.collapsible-block {
		// Override default toggle styles
		border-bottom: none;
		margin-left: @paddingHorizontal + @iconSize + @iconHeadingGap;
		margin-right: @paddingHorizontal;
		font-size: (7 * @fontSize) / 8;
		width: auto;
		> ul {
			padding-bottom: @fontSize + @headingMargin;
		}

		ul {
			// FIXME: Shouldn't have to do this. Add another class to normal sections to distinguish them from this content_block
			list-style: none;
			// Account for border at bottom of heading
			margin-bottom: 1px;

			li {
				padding-top: @fontSize;
				// This ensures when a heading spills to a second line it can be distinguished from other headings
				a {
					white-space: pre-wrap;
					word-break: break-word;
				}
				line-height: 1.2;
			}
		}
	}
}