@import "variables";

.admin-toolbox {
	position: absolute;
	height: 40px;
	width: 40px;
	right: 10px;
	bottom: 10px;

	> input[type="checkbox"] {
		display: none;

		+ .toolbox {
			opacity: 0;
			position: absolute;
			bottom: 0;
			min-width: 300px;
			transform: translateX(100%);
			background-color:$color-grey;
			border-radius: $border-radius;
		    box-shadow: 2px 2px 4px #182410;
			transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;

			.tool-group {
				display: flex;
				margin: 15px;
			}
			.tool-button {
				font-size: 1rem;
				padding: 5px;
				margin: 5px;
				color: $color-white;
				background-color: $color1;
				border-radius: 4px;

				&:hover {
					cursor: pointer;
					background-color: $color2;
				}
			}

			h4 {
				color: $color-black;
				margin: 20px 20px -15px 20px;
			}
		}

		&:checked {
			+ .toolbox {
				opacity: 1;
				transform: translateX(calc(-100% - 10px));
			}
		}
	}

	> .toggle-button {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 1.6rem;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		color: $color-green-50;
		background-color: $color-black;

		&:hover {
			background-color: $color1;
			cursor: pointer;
		}
	}
}

.material-link-list {
	.material-link {
		display: grid;
		grid-template-columns: 4fr 2fr 1fr;
		padding: 5px;
		grid-gap: 15px;

		&:nth-child(odd) {
			background-color: $color-purple-100;
		}

		&:hover {
			cursor: pointer;
			background-color: $color-purple-800;
			color: $color-purple-50;
		}
	}
}

main {
    article {
        &.main-article {
            position: relative;

            .fas {
                position: absolute;
                font-size: 1.4rem;
                padding: 5px;
                width: 32px;
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: $border-radius;
                margin: 5px;
                top: 5px;
                right: 5px;

                &:hover {
                    background-color: rgba(130, 182, 130, 0.603);
                    cursor: pointer;
                    color: green;
                }
            }

            .fa-pencil-alt {
                left: 5px;
                right: unset;
            }
        }
    }
}