// Variables

$handorgel-border-width: 0;

$handorgel__header__button-background-color: transparent;
$handorgel__header--open__button-background-color: transparent;
$handorgel__header--focus__button-background-color: transparent;

$handorgel__header__button-padding: 1rem 0;
$handorgel__content__inner-padding: 1rem 0;

$handorgel__content-background: transparent;

// Variables for closing transition
$handorgel__content-transition-opacity-time: 0.2s;
$handorgel__content-transition-height-time: 0.2s;

@import "~handorgel/src/scss/style";

.handorgel {
	width: auto;
	border-bottom: 1px solid $gray-light;
	margin-bottom: 2rem;

	&__header {
		position: relative;
		@include rfs($h5-font-size);
		border-top: 1px solid $gray-light;

		.handorgel--gray & {
			padding-top: .5rem;
			&::before {
				display: block;
				content: '';
				position: absolute;
				border-top: .5rem solid white;
				width: 200vw;
				top: 0;
				left: -50vw;
				z-index: 1;
			}

			&:first-child {
				padding-top: 0;
				&::before {
					display: none;
				}
			}
		}


		&__button {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;

			svg {
				color: $primary;
				transition: transform 0.2s;
				transform: rotate(-90deg);

				body.company & {
					color: $secondary;
				}
			}

			.title {
				min-height: 1.5rem;
				@include rfs(1rem);
				color: $primary;
				transition: all 0.2s;
				display: inline-flex;
				align-items: center;
				flex-flow: wrap;
				max-width: calc(100% - 1rem);

				body.company & {
					color: $secondary;
				}

				small {
					display: inline-flex;
					padding-top: .25rem;
					flex: 0 1 100%;
					@include rfs(.875rem);
					font-weight: 100;
					color: $body-color;
					opacity: .8;
				}
			}

			&[aria-expanded="true"] {
				.title {
					@include rfs(1.25rem);
					height: 4rem;
					color: $dark;
				}

				svg {
					transform: rotate(0);
				}
			}

		}
	}

	&__content {
		&__inner {
			p {
				line-height: 2rem;
			}

			h6 {
				letter-spacing: 1px;
				text-transform: uppercase;
				margin-bottom: 1rem;
			}

			ul {
				padding-left: 1rem;
				list-style: none;

				li {
					position: relative;
					// @include rfs(.875rem);

					&::before {
						content: '';
						display: inline-block;

						position: absolute;
						left: -1rem;
						top: 10px;

						width: 4px;
						height: 4px;
						border-radius: 50%;
						background-color: $primary;

						body.company & {
							background-color: $secondary;
						}

					}
				}
			}
		}
	}

}