@tailwind base;
@tailwind components;
@tailwind utilities;

@page {
    // size: 8.5in 14.0in;
    size: 8.27in 13.0in;
    margin: 0;
}

html, body {
    @apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
	font-family: 'Source Sans Pro', sans-serif;
    font-size: calc(.75rem + 1vmin);
}

.align-center {
    text-align: center;
}

span.error {
    @apply text-red-600;
}

.header {
    h1 {
        @apply text-3xl font-bold mb-6 mt-4;
    }
}

.container {
    @apply bg-white mx-auto h-full p-12;
}

.letter {
    @apply mx-auto p-1 text-black w-full;
    font-size: calc(.5rem + 1vmin);

    .mobile-info {
        @apply italic text-gray-600;
        display: initial;
    }

    .print-button {
        @apply text-xs text-white bg-indigo-400 px-2 py-1 rounded hidden;

        &:hover {
            @apply bg-indigo-500;
        }

        &:focus {
            @apply outline-none bg-indigo-600
        }
    }

    p {
        line-height: 1.1;
    }

    .letter__header {
        @apply text-center mt-4;

        img {
            @apply w-full;
        }
    }

    .letter__body-header {
        @apply text-center;
    }

    ol {
        @apply list-decimal list-inside;
    }

    table {
        @apply w-full;

        td {
            @apply align-top pr-2;
        }

        .strong {
            @apply font-bold;
        }

        .special {
            @apply font-bold tracking-widest text-xl italic;
        }
    }

    table.nilai {
        th, td {
            @apply border border-black px-1;
        }

        .long {
            @apply hidden;
        }

        .short {
            display: table-cell;
        }

        tbody.counter {
            counter-reset: nomor;

            td:not(.no-num):first-child::before {
                counter-increment: nomor;
                content: counter(nomor) ".";
            }
        }
    }

    table.signature {
        @apply w-auto ml-auto mt-4;

        .letter__sign {
            // height: 120%;
            height: 6rem;
            // background-image: url('/img/letter-sign-stamp.png');
            // background-size: auto 100%;
            // background-repeat: no-repeat;
        }
    }
}

.form {
    @apply w-full mt-6;

    .form-grid {
        @apply flex flex-wrap justify-center -mx-3 mb-6;

        .form-group {
            @apply w-full px-3 mb-6;

            .form-label {
                @apply block uppercase tracking-wide text-sm font-bold mb-2;
            }

            .form-input {
                @apply appearance-none block w-full bg-gray-200 border rounded py-3 px-4 leading-tight;

                &:focus {
                    @apply outline-none bg-white border-gray-500;
                }
            }

            .input-helper {
                @apply text-gray-600 text-sm italic;
            }
        }

        .form-submit {
            @apply bg-gray-400 border rounded py-3 px-4 leading-tight uppercase self-center;

            &:hover {
                @apply border-gray-500 bg-white;
            }

            &:focus {
                @apply outline-none;
            }
        }
    }
}

.promo-utpas {
    @apply hidden;

    p {
        @apply leading-normal;
    }
}

@screen md {
    .header {
        h1 {
            @apply text-5xl;
        }
    }

    .container {
        @apply w-3/4 mt-8;
    }

    .letter {
        .mobile-info {
            @apply hidden;
        }

        .print-button {
            display: initial;
        }

        table.nilai {
            .long {
                display: table-cell;
            }

            .short {
                @apply hidden;
            }
        }
    }
}

@screen print {
    html,body {
        @apply bg-white;
    }

    body {
        margin: 1cm;
    }

    .container > .header, .container > .form, .letter .print-button, .print-info, .letter .mobile-info {
        @apply hidden;
    }

    .container {
        @apply w-full max-w-full m-0 p-0;
    }

    .letter {
        font-family: 'Calibri', 'Source Sans Pro', sans-serif;
        font-size: 12px;

        .letter__body-header {
            font-size: 14px;
        }

        table.nilai {
            .long {
                display: table-cell;
            }

            .short {
                @apply hidden;
            }
        }
    }

    .promo-utpas {
        @apply block;
        page-break-before: always;
    }
}