@layer blocks {
	.accordion {
		display: grid;
		gap: 15px;
	}

	.accordion-item {
		background-color: var(--color-white);
		border: 1px solid var(--color-gray-5);
		border-radius: 5px;
		box-shadow: 0 6px 16px rgb(0 0 0 / 4%);
		overflow: hidden;

		&::details-content {
			block-size: var(--details-height, 0);
			transition: block-size var(--transition-time) ease-in-out, content-visibility var(--transition-time) allow-discrete;
		}

		&[open] {
			--details-height: auto;
			--icon-rotate: 180deg;
		}
	}

	.accordion-label {
		align-items: center;
		display: flex;
		font-weight: 700;
		font-size: var(--body-font-size-l);
		gap: 10px;
		justify-content: space-between;
		padding: 15px 20px;
		cursor: pointer;

		&::-webkit-details-marker {
			display: none;
		}

		&:focus-visible {
			box-shadow: 0 0 0 1px var(--color-black), inset 0 0 0 2px var(--color-teal), inset 0 0 0 4px var(--color-white);
			outline: none;
		}
	}

	.accordion-label-icon {
		display: grid;
		rotate: var(--icon-rotate, 0deg);
		place-content: center;
		transition: rotate var(--transition-time) ease-in-out;

		&::before {
			color: currentColor;
			content: '\e313';
			font-family: var(--material-icons);
			font-size: 1.5em;
			line-height: 1;
		}
	}

	.accordion-dropdown {
		border-block-start: 1px solid var(--color-gray-5);
		display: grid;
		gap: 20px;
		padding: 20px;

		& li {
			&::marker {
				color: var(--color-gray-7);
			}

			& + li {
				margin-block-start: 15px;
			}
		}
	}

	.accordion-centered-dropdown {
		text-align: center;
	}

    .sub-accordions-container {
        display: grid;
        gap: 15px;
        margin-block-start: 20px;
    }

    .sub-accordion-item {
        background-color: var(--color-white);
        border: 1px solid var(--color-red-2);
        overflow: hidden;

        &::details-content {
            block-size: var(--sub-details-height, 0);
            transition: block-size var(--transition-time) ease-in-out, content-visibility var(--transition-time) allow-discrete;
        }

        &[open] {
            --sub-details-height: auto;
            --sub-icon-rotate: 180deg;
        }
    }

    .sub-accordion-label {
        align-items: center;
        display: flex;
        font-weight: 700;
        font-size: var(--body-font-size-l);
        gap: 10px;
        justify-content: space-between;
        padding: 15px 20px;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }

        &:focus-visible {
            box-shadow: 0 0 0 1px var(--color-black), inset 0 0 0 2px var(--color-teal), inset 0 0 0 4px var(--color-white);
            outline: none;
        }
    }

    .sub-accordion-label-icon {
        display: grid;
        rotate: var(--sub-icon-rotate, 0deg);
        place-content: center;
        transition: rotate var(--transition-time) ease-in-out;

        &::before {
            color: currentColor;
            content: '\e313';
            font-family: var(--material-icons);
            font-size: 1.5em;
            line-height: 1;
        }
    }

    .sub-accordion-content {
        border-block-start: 1px solid var(--color-gray-5);
        padding: 20px;
		
		& p{
			color: #a50000;
		}
    }
}