<commit_before>@require '../mixins/card'
@require '../mixins/progress-bar'
@require '../icons'

.area-of-study {
	card()

	overflow: hidden
	margin-bottom: 0.75em

	$progress-height = 4px

	h1 {
		$base-padding = $block-edge-padding * 1.5
		padding: $base-padding $base-padding ($base-padding - $progress-height / 2)
		font-size: inherit
		font-weight: 400
		margin: 0
		z-index: 1
		position: relative
		font-feature-settings: 'smcp'
	}

	& > .summary {
		padding-top: ($progress-height / 2)

		position: relative
		cursor: pointer

		// display: flex
		// flex-direction: row
		// justify-content: space-between
		// align-items: center
	}

	progress {
		progress-track('blue')

		position: absolute
		top: 0
		left: 0

		width: 100%
		height: $progress-height

		border: 0

		&.hundred {
			progress-track('green')
		}
		&.ninety {
			progress-track('orange')
		}
		&.eighty {
			progress-track('orange')
		}
		&.seventy {
			progress-track('orange')
		}
		&.sixty {
			progress-track('amber')
		}
		&.fifty {
			progress-track('amber')
		}
		&.forty {
			progress-track('amber')
		}
		&.thirty {
			progress-track('amber')
		}
		&.twenty {
			progress-track('red')
		}
		&.ten {
			progress-track('red')
		}
		&.under-ten {
			progress-track('red')
		}
		&.zero {
			progress-track('blue-gray')
		}
	}

	.summary > .details-marker       { display: none; }
	.summary::-webkit-details-marker { display: none; }
	.summary::-moz-details-marker    { display: none; }
	.summary::-ms-details-marker     { display: none; }
	.summary::details-marker         { display: none; }

	& > .summary::after {
		ionicon($ionicon-ios-more)

		margin-right: 12px
		z-index: 1
		font-size: 2em

		transition: 0.1s
	}

	&[open] > .summary::after {
		ionicon($ionicon-ios-more-outline);

		transform: rotate(90deg) scale(0.8)
	}

	&.loading > .summary::after {
		ionicon($ionicon-load-c)

		animation: spin 1s infinite ease-in-out
		font-size: 1em
	}
}

.add-area-of-study {
	+add-button($psuedo: '::before') { margin-right: 0.5em }
	button--raised()

	min-height: 0
	padding-top: 0.25em
	padding-bottom: 0.25em
	width: 100%
	text-align: left
	padding-left: $block-edge-padding * 1.5

	text-transform: none
	font-feature-settings: 'smcp'
	font-size: 0.85em
}
<commit_msg>Fix the button positioning on areaOfStudy<commit_after>@require '../mixins/card'
@require '../mixins/progress-bar'
@require '../icons'

.area-of-study {
	card()

	overflow: hidden
	margin-bottom: 0.75em

	$progress-height = 4px

	h1 {
		$base-padding = $block-edge-padding * 1.5
		padding: $base-padding $base-padding ($base-padding - $progress-height / 2)
		font-size: inherit
		font-weight: 400
		margin: 0
		z-index: 1
		position: relative
		font-feature-settings: 'smcp'
	}

	& > .summary {
		padding-top: ($progress-height / 2)

		position: relative
		cursor: pointer

		// display: flex
		// flex-direction: row
		// justify-content: space-between
		// align-items: center
	}

	progress {
		progress-track('blue')

		position: absolute
		top: 0
		left: 0

		width: 100%
		height: $progress-height

		border: 0

		&.hundred {
			progress-track('green')
		}
		&.ninety {
			progress-track('orange')
		}
		&.eighty {
			progress-track('orange')
		}
		&.seventy {
			progress-track('orange')
		}
		&.sixty {
			progress-track('amber')
		}
		&.fifty {
			progress-track('amber')
		}
		&.forty {
			progress-track('amber')
		}
		&.thirty {
			progress-track('amber')
		}
		&.twenty {
			progress-track('red')
		}
		&.ten {
			progress-track('red')
		}
		&.under-ten {
			progress-track('red')
		}
		&.zero {
			progress-track('blue-gray')
		}
	}

	.summary > .details-marker       { display: none; }
	.summary::-webkit-details-marker { display: none; }
	.summary::-moz-details-marker    { display: none; }
	.summary::-ms-details-marker     { display: none; }
	.summary::details-marker         { display: none; }

	& > .summary::after {
		ionicon($ionicon-ios-more)

		z-index: 1
		font-size: 2em

		position: absolute
		right: 12px
		top: $progress-height
		// margin-right: 12px
		// top: ($progress-height + $progress-height / 4)

		// transition: transform 0.1s
	}

	&[open] > .summary::after {
		ionicon($ionicon-ios-more-outline);

		transform: rotate(90deg) scale(0.8)
	}

	&.loading > .summary::after {
		ionicon($ionicon-load-c)

		top: $progress-height * 2
		animation: spin 1s infinite ease-in-out
		font-size: 1em
	}
}

.add-area-of-study {
	+add-button($psuedo: '::before') { margin-right: 0.5em }
	button--raised()

	min-height: 0
	padding-top: 0.25em
	padding-bottom: 0.25em
	width: 100%
	text-align: left
	padding-left: $block-edge-padding * 1.5

	text-transform: none
	font-feature-settings: 'smcp'
	font-size: 0.85em
}

{'fraction_non_alphanumeric': 0.17150170648464164, 'fraction_numerical': 0.021757679180887373, 'mean_word_length': 2.8308823529411766, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '903447', 'n_tokens_mistral': 2077, 'n_tokens_neox': 1768, 'n_words': 333}