@import '../definitions/variables';

.document-general-settings {
	&__category {
		padding: 1em;
		background: lighten($background-box, 1);

		&:not(:first-child) {
			margin-top: 1em;
		}

		&-header {
			width: 100%;
			text-align: inherit;
			position: relative;
			padding: 1em 0.6em;
		}
		@include greater($size-l) {
			padding: 0.6em;
		}
		&:first-child &-header {
			padding-top: 0.6em;
		}

		&-name {
			display: block;
			position: relative;
			font-weight: bold;
			color: lighten($text, 15);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: visible;

			@include greater($size-m) {
				overflow: hidden;
			}
		}
		&-settings {
			@extend [class^="icon-"]:before;
			position: absolute;
			display: none;
			top: 1.2em;
			right: 0.6em;
			color: lighten($text, 25);
		}
		&:first-child &-settings {
			top: 0.8em;
		}
		@include greater($size-l) {
			&-header:hover &-name {
				padding-right: 2em;
			}
			&-header:hover &-settings {
				display: block;
			}
		}
	}

	&__budget {
		display: block;
		position: relative;

		& + & {
			border-top: 1px solid darken($background-box, 5);
		}

		&-button {
			width: 100%;
			text-align: inherit;
			background: lighten($background-box, 2);

			@include greater($size-l) {
				&:hover {
					background: lighten($background-box, 4);
				}
			}
		}

		&-name {
			display: block;
			padding: 0.8em 0.6em;

			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			@include greater($size-l) {
				padding: 0.6em;
			}
		}
		&--hidden {
			display: none;
			text-decoration: line-through;
		}

		&-settings {
			@extend [class^="icon-"]:before;
			position: absolute;
			display: none;
			top: 0.8em;
			right: 0.6em;
			color: lighten($text, 25);
		}
		@include greater($size-l) {
			&:hover &-name {
				padding-right: 2em;
			}
			&:hover &-settings {
				display: block;
			}
		}
	}
	&__categories--with-hidden &__budget--hidden {
		display: block;
	}

	&__add,
	&__toggle-hidden-button {
		display: block;
		width: 100%;

		margin-top: 1em;
		padding: 1em;
		background: lighten($background-box, 1);
		text-align: center;

		@include greater($size-l) {
			&:hover {
				background: $background-box;
			}
		}
	}
	&__toggle-hidden-button {
		font-size: 0.8em;
		color: rgba($text, 0.6);
	}

	&__add-buttons {
		overflow: hidden;
	}
	&__add {
		float: left;
		width: 50%;

		&-plus {
			display: block;
			font-size: 4em;
			line-height: 1em;
			color: rgba($text, 0.4);
		}
		&-text {
			display: block;
			margin: 0 0 1em;
			font-size: 0.8em;
			color: rgba($text, 0.8);
		}
	}
}