// Elements

.text-shadow {
    text-shadow: 1px 1px 2px #000;
}

.left-8 {
    left: 2rem;
}

.left-80 {
    left: 20rem;
}

.-bottom-12 {
    bottom: -3rem;
}

.max-h-64 {
    max-height: 16rem;
}

@for $i from 1 through 9 {

    .bg-primary-#{$i}00 {
        @apply bg-green-#{$i}00;
    }

    .hover:bg-primary-#{$i}00 {
        @apply bg-green-#{$i}00;
    }

    .bg-secondary-#{$i}00 {
        @apply bg-blue-#{$i}00;
    }

    .text-primary-#{$i}00 {
        @apply text-gray-#{$i}00;
    }

    .hover:text-primary-#{$i}00 {
        @apply text-gray-#{$i}00;
    }
}

.page-title {
    @apply text-3xl font-bold text-primary-900;
}

a {
    @apply text-primary-700;

    &:hover {
        @apply text-primary-900;
    }
}

.modal-container {
    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}

.modal {
    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    animation-name: modalopen;
    animation-duration: 0.5s;
}

.box-toggle {
    @apply shadow;

    &-header {
        @apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;

        svg {
            @apply w-8 text-primary-600 fill-current;
        }
    }

    svg {
        transform: rotate(270deg);
        transition: transform 0.3s;

        &.open {
            //@apply rotate-90;
            transform: rotate(90deg);
        }
    }

    &-content {
        @apply px-4 py-2;
    }
}

.card {
    @apply bg-primary-300 rounded;

    svg {
        @apply max-w-full max-h-64 m-auto fill-current;
    }

    h2 {
        @apply text-2xl text-center font-bold;
    }

    &:hover {
        @apply bg-primary-500;

        h2 {
            @apply text-primary-700;
        }
    }
}