@import '../definitions/variables';

$stats-height-mobile: 5.8em;
$stats-height-desktop: 8.6em;

.budget {
	display: flex;
	position: relative;
	min-height: 100%;
	font-size: 0.9em;
	user-select: none;

	@include greater($size-l) {
		font-size: 1em;
        padding-top: 1em;

        &:before  {
            content: '';
            position: fixed;
            top: 5em;
            background: #fff;
            background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
            z-index: 15;
            left: $sidebar-width;
            width: 14em;
            height: calc(7.8em);
        }
	}


	&__container {
		display: flex;
		padding: 0 0 2em;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		align-items: stretch;
        scrollbar-width: none;
		flex: 2;

        &::-webkit-scrollbar {
            display: none;
        }
    }


	&__labels {
		position: absolute;
		top: $stats-height-mobile;
		width: 35%;
		padding-left: env(safe-area-inset-left);
		z-index: 10;


		@include greater($size-l) {
			float: left;
			position: static;
			top: 0;
			width: 15em;
			margin-top: calc(#{$stats-height-desktop} - 60px);
			background: lighten($background-box, 4);
			border-right: 1em solid $background;
            z-index: 18;
		}
	}

	&__label {
		&-category-header {
			position: relative;
			height: $category-height;

			@include greater($size-l) {
				height: 60px;
			}
		}

		&-category:first-child &-category-header {
			background: $background;
		}

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

			@include greater($size-m) {
				overflow: hidden;
			}
		}

		&-category-add {
			position: absolute;
			display: none;
			top: 1.35em;
			right: 1.8em;
			font-size: 1.2em;
			font-weight: bold;
			color: lighten($text, 25);
		}
		&-category-settings {
			@extend [class^="icon-"]:before;
			position: absolute;
			display: none;
			top: 1.9em;
			right: 0.6em;
			color: lighten($text, 25);
		}

		@include greater($size-l) {
			&-category-header:hover &-category-name {
				padding-right: 3em;
			}
			&-category-header:hover &-category-add,
			&-category-header:hover &-category-settings {
				display: block;
			}
		}

		&-budget {
			display: block;
			height: $budget-height;
			position: relative;
			background: lighten($background-box, 1);

			@include greater($size-l) {
				height: 40px;
			}

			&:nth-child(2n) {
				background: lighten($background-box, 4);
			}
		}

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

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

			&--hidden {
				text-decoration: line-through;
			}
		}

		&-budget-settings {
			@extend [class^="icon-"]:before;
			position: absolute;
			display: none;
			top: 0.8em;
			right: 0.6em;
			color: lighten($text, 25);
		}

		@include greater($size-l) {
			&-budget:hover &-budget-name {
				padding-right: 2em;
			}
			&-budget:hover &-budget-settings {
				display: block;
			}
		}
	}


	&__month {
		position: relative;
		background: $background;
		scroll-snap-align: start;
		flex: 0 0 100%;
		flex-flow: column;
		justify-content: end;
		opacity: 0.7;
		transition: opacity 0.3s ease-in-out;

		@include greater($size-l) {
			flex: 0 0 calc(50% - 2em);
			background: lighten($background-box, 4);

			& + & {
				margin-left: 1em;
			}
		}
		@include greater($size-m * 2) {
			flex: 0 0 calc(33.3% - 1.5em);
		}
		@include greater($size-m * 3) {
			flex: 0 0 26em;
		}


		&--activated {
			opacity: 1;
		}

		&-header {
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100%);
            z-index: 16;

			height: $stats-height-mobile;
			text-align: center;
            transition: transform 0.3s ease-out, font-size 0.3s ease-in-out;
            transform: translate3d(0, 0, 0);
            background: #fff;

            @include greater($size-l) {
                transition: font-size 0.3s ease-in-out;
            }

            &--fixed {
                @include greater($size-l) {
                    position: fixed;
                    z-index: 16;
                    transform: translate3d(0, calc(env(safe-area-inset-top, 0) + 80px), 0);
                    font-size: 1em;
                }
            }
            &:not(&--fixed) {
                left: 0 !important;
            }

			&-m,
			&-y {
				display: none;
			}

			&-m {
				font-weight: bold;
				font-size: 28px;
				color: lighten($text, 20);
			}

			&-y {
				font-size: 28px;
				font-weight: 100;
				margin-left: 0.1em;
				color: lighten($text, 25);
			}

			@include greater($size-l) {
				height: $stats-height-desktop;
				padding: 0.6em 0;
				background: lighten($background-box, 4);

				&-m,
				&-y {
					display: inline;
				}
			}
		}
        &--current &-header:before {
            content: '';
            position: absolute;
            left: 3px;
            top: 0;
            right: 3px;
            height: 3px;
            z-index: 2;
            background: rgba($primary-5, 0.5);
            border-radius: 0 0 5px 5px;

            @include greater($size-l) {
                height: 5px;
                border: 1px solid lighten($background-box, 4);
                border-top: none;
            }
        }

		&-category {
			padding-top: $category-height;

			@include greater($size-l) {
				padding-top: 60px;
			}

			&:first-child {
                margin-top: $stats-height-mobile;
				background: $background;

				@include greater($size-l) {
					background: lighten($background-box, 4);
                    margin-top: 0;
					padding-top: $stats-height-desktop;
				}
			}
		}

		&-portions {
			background: lighten($background-box, 4);
		}

		&-portion {
			padding: 0.6em 1em 0.6em calc(35% + 1em);
			overflow: hidden;
			height: $budget-height;

			@include greater($size-l) {
				padding-left: calc(45% + 1em);
			}
			@include greater($size-l) {
				padding-left: 1em;
			}

			@include greater($size-l) {
				height: 40px;
			}

			&:nth-child(2n+1) {
				background: lighten($background-box, 1);
			}
		}

		&-budgeted,
		&-outflow,
		&-balance {
			display: block;
			float: left;
			text-align: right;
		}

		&-budgeted {
			width: 45%;
			background: transparent;
			border-bottom: 1px dotted rgba($text, 0.3);
			user-select: text;
			opacity: 0.1;
			pointer-events: none;

			&[disabled] {
				border-bottom: 0;
			}

			&--visible {
				opacity: 1;
				pointer-events: auto;
			}
		}

		&-outflow {
			display: none;
			opacity: 0.6;
		}

		&-balance {
			float: right;
			width: 55%;

			&--negative {
				color: $red;
			}

			&-item {
				display: none;

				&--active {
					display: inline-block;
				}
                &--goal {
                    width: calc(100% - 2.75em);
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
			}
		}

		@include greater($size-m) {
			&-budgeted {
				width: 28%;
			}
			&-outflow {
				display: block;
				width: 31%;
			}
			&-balance {
				width: 41%;
			}
		}
		@include greater($size-m) {
			&-outflow,
			&-balance {
				font-size: 0.9em;
			}
		}

		&-progress {
			float: right;
			display: inline-block;
			width: 2em;
			height: 0.3em;
			margin: 0.5em 0.25em 0 0.5em;
			padding: 1px;
			background: rgba($background-footer, 0.2);
			border-radius: 0.15em;

			&--hidden {
				display: none;
			}

			&--active {
				background: $background-footer;
			}

			&--negative {
				background: $red;
			}

			&--complete {
				background: rgba(darken($green, 10), 0.8);
			}


			&-bar {
				display: none;
				background: $background-box;
				height: 100%;
				border-radius: 4px;
				transition: width 0.3s ease-out;
			}

			&--active &-bar {
				display: block;
			}

			&--negative &-bar {
				display: none;
			}

			&--complete &-bar {
				background: rgba(lighten($green, 20), 0.5);
			}
		}
	}

	&__stats {
		cursor: pointer;
		user-select: none;


		&-page {
			display: none;
			height: 4.6em;
			padding-top: 1.2em;
			overflow: hidden;

			&--active {
				display: block;
			}

			@include greater($size-l) {
				height: 3.6em;
				padding-top: 0.4em;
			}
		}

		&-label,
		&-value {
			display: block;
			float: left;
			width: 50%;
		}

		&-label {
			padding: 0;
			font-size: 0.8em;
			color: lighten($text, 20);
		}

		&-value {
			margin-top: -1px;
			font-size: 1.8em;
			font-weight: bold;
			color: lighten($text, 10);

			&--warn {
				color: darken($red, 10);
			}
		}

		&-page--single &-label,
		&-page--single &-value {
			width: 100%;
		}

		&-indicator {
			display: inline-block;
			width: 5px;
			height: 5px;
			border-radius: 5px;
			background: rgba($background-footer, 0.2);

			& + & {
				margin-left: 4px;
			}

			&--active {
				background: rgba($background-footer, 0.6);
			}
		}
	}

	&__autofill {
		position: absolute;
		top: 0;
		right: 0;
		width: 3.5em;
		height: 3.5em;
		overflow: hidden;

		&-circle {
			&:after {
				content: '';
				display: block;
				position: absolute;
				width: 4em;
				height: 4em;
				top: -1.5em;
				right: -2.0em;
				transform: translate3d(0, 0, 0);
				transition: transform ease-out 0.3s;

				background: $background-box;
				border-radius: 50%;
				z-index: 1;
			}

			&:before {
				position: absolute;
				top: 0.6em;
				right: 0.2em;
				z-index: 2;
				color: darken($background-box, 20);
				transition: transform ease-out 0.3s;
			}
		}

		@include greater($size-l) {
			&:hover &-circle:after {
				transform: translate3d(-0.5em, 0.5em, 0);
				background: darken($background-box, 5);
			}
			&:hover &-circle:before {
				transform: scale3d(1.2, 1.2, 1.2) translate3d(0, 0.2em, 0);
				color: darken($background-box, 30);
			}
		}
	}
}