@tailwind base;

@tailwind components;

@tailwind utilities;

body {
    @apply mx-1;
}
a {
    @apply text-blue-600;
}
a:focus, a:hover {
    @apply text-gray-600;
}
span {
    @apply whitespace-nowrap;
}
@screen md {
    body {
        @apply mx-0;
    }
}

/* my own styles, use tailwind as much as possible */

/* this is for classless content, eg: from markdown */
.content {
    h1 {
        @apply font-bold text-2xl mb-4 leading-relaxed text-center;
    }
    h2 {
        @apply font-bold text-2xl mb-3 leading-relaxed;
    }
    h3 {
        @apply font-bold text-xl mb-2 leading-relaxed;
    }
    h4 {
        @apply font-bold text-lg mb-1 leading-relaxed;
    }
    h5 {
        @apply font-bold uppercase mb-1 leading-relaxed;
    }
    h6 {
        @apply font-bold mb-1 leading-relaxed;
    }
    p {
        @apply mb-4;
    }
    ol {
        @apply mb-4 pl-2 list-inside list-decimal;
    }
    ul {
        @apply mb-4 pl-2 list-inside list-disc;
    }
    figure {
        @apply mb-4;
    }
    textarea {
        @apply p-1 w-full text-sm border rounded border-gray-600;
    }
    table {
        @apply mb-4 border-collapse border-0;
        th, td {
            @apply p-0 align-top border-0;
        }
        thead {
            th {
                @apply align-bottom border-0;
            }
	}
        tr.odd {
            @apply bg-gray-50;
        }
    }
    blockquote {
        @apply mb-4 border-l-4 border-gray-400 p-2;
        p {
            @apply mb-0;
        }
    }
    pre {
        @apply mb-4 p-2 bg-gray-50;
        > code {
            @apply whitespace-pre;
        }
    }
    dd,
    dt,
    li {
        @apply mb-1;
    }
}

/* Alerts and form errors */
.alert {
    @apply p-2 rounded mb-0;
}
.alert-info {
    @apply bg-yellow-200 text-blue-700;
}
.alert-warning {
    @apply bg-yellow-200 text-purple-700;
}
.alert-danger {
    @apply bg-yellow-200 text-red-700;
}
.alert-info:empty {
    @apply hidden;
}
.alert-warning:empty {
    @apply hidden;
}
.alert-danger:empty {
    @apply hidden;
}
.name {
    @apply capitalize italic;
}
.button {
    @apply flex-none px-6 py-1 text-purple-600 inline-block rounded appearance-none
    font-bold whitespace-nowrap text-lg text-center uppercase;
}
.button:focus, .button:hover {
    @apply text-gray-600;
}
.button[disabled] {
    @apply pointer-events-none cursor-default opacity-50;
}
.button.disabled {
    @apply pointer-events-none cursor-default opacity-50;
}
/* progress bar */
.progress-bar {
    @apply fixed left-0 top-0 h-1 bg-indigo-700 z-50;
    transition:
        width 300ms ease-out,
        opacity 150ms 150ms ease-in;
    transform: translate3d(0, 0, 0);
}
.viewport {
    @apply relative min-h-screen flex flex-col;
    .phx-connected {
	@apply flex-grow flex flex-col;
    }
    .header {
	@apply sticky top-0 bg-gray-100 p-2 flex;
	.brand {
            img {
		@apply inline-block h-8;
            }
	    .title {
                @apply text-3xl text-indigo-500 font-bold align-bottom;
	    }
	    .info {
		@apply text-gray-600 align-bottom;
	    }
	}
        .nav {
            @apply flex-grow text-right;
            .button {
                @apply cursor-pointer ml-1 px-1;
            }
	    .attach {
		@apply inline-block;
		input[type="file"] {
		    @apply hidden;
		}
	    }
        }
    }
    .content {
	@apply flex-grow flex flex-col;
	form {
	    @apply p-2 bg-gray-50 flex flex-col;
	    .line {
		@apply w-full flex flex-row mb-2 space-x-2;
		input[type="text"] {
		    @apply flex-grow;
		}
		input[type="email"] {
		    @apply flex-grow;
		}
	    }
	    .field {
		@apply mb-2 flex flex-row flex-wrap justify-center gap-x-1;
	    }
	    .hide {
		@apply hidden;
	    }
	    .long {
		@apply w-full;
	    }
	    .center {
		@apply w-full text-center;
	    }
	    hr {
		@apply mb-2 border-gray-200;
	    }
            .button[type="reset"] {
		@apply flex-none cursor-pointer text-white bg-pink-600;
            }
            .button[type="submit"] {
		@apply flex-none cursor-pointer text-white bg-purple-600;
            }
	    .toolbar {
		@apply pt-2 flex flex-row flex-wrap justify-center gap-x-1;
	    }
	    section {
		@apply pt-2 border-b flex flex-row flex-wrap justify-center gap-x-2;
	    }
	    section.twoside {
		@apply flex-col;
	    }
	    section:last-child {
		@apply border-b-0 pb-0;
	    }
            label {
                @apply flex-initial mr-2;
		.focus {
		    @apply font-bold italic;
		}
            }
	    .footnote {
		@apply text-sm text-gray-700 flex justify-center;
	    }
	    .error {
		@apply text-sm text-red-700 py-2;
	    }
	    select {
		@apply border rounded border-gray-600;
	    }
	    .code {
		@apply font-mono;
	    }
            input[type="number"] {
                @apply w-16 leading-relaxed border rounded border-gray-600;
            }
            input[type="text"] {
                @apply w-48 leading-relaxed border rounded border-gray-600;
            }
            input[type="text"].long {
                @apply w-80;
            }
            input[type="email"] {
                @apply w-80 leading-relaxed border rounded border-gray-600;
            }
            input[type="password"] {
                @apply w-40 leading-relaxed border rounded border-purple-600;
            }
	}
	.preview {
	    @apply border rounded bg-yellow-50 p-2 overflow-auto;
	}
	.email-addr {
	    @apply text-sm italic flex-grow whitespace-nowrap overflow-hidden;
	}
	.address-book {
	    @apply w-full border-0;
	    .date {
		@apply font-bold text-sm whitespace-nowrap overflow-hidden;
	    }
	    th {
		@apply px-2 py-2 align-top border-0 text-left;
	    }
            td {
		@apply px-2 py-1 align-top border-0 text-left;
            }
	    th.address-book-delete {
		@apply w-1/12;
	    }
	    th.address-book-from {
		@apply w-5/12;
	    }
	    th.address-book-first {
		@apply w-1/6; 
	    }
	    th.address-book-last {
		@apply w-1/6; 
	    }
	    th.address-book-count {
		@apply w-1/6;
	    }
	    thead {
		@apply bg-yellow-50 text-sm capitalize;
	    }
            tr:nth-child(even) {
		@apply bg-gray-50;
            }    
	}
	ul.button-examples {
	    @apply list-none;
	    li {
		@apply inline-block;
		button {
		    @apply text-blue-600 border border-blue-600 rounded mx-1 px-3 py-2 text-sm font-bold;
		}
		button:focus, button:hover {
		    @apply text-gray-600 border-gray-600;
		}
	    }
	}
	ul.attachments {
	    @apply border rounded mb-0 py-1;
	    li {
		@apply text-sm inline;
		.progress-box {
		    @apply border h-2 w-16 inline-block;
		    .progress {
			@apply bg-indigo-700 h-full;
		    }
		}
	    }
	}
	.node-container {
	    @apply w-full;
	    .message {
		@apply flex flex-row flex-wrap border-b border-gray-100 mx-2;
		.subject {
		    @apply w-full whitespace-nowrap overflow-hidden;
		}
		.date {
		    @apply font-bold text-sm whitespace-nowrap w-24 flex-none pl-2;
		}
	    }
	    .message.message-unread {
		.subject {
		    @apply font-bold;
		}
	    }
	    .message.message-replied {
		@apply bg-yellow-50;
	    }
	    .children-container {
		@apply border-l-4 border-yellow-600 ml-2;
	    }
	}
	.fill {
	    @apply flex-grow flex flex-col;
	}
	.fill[hidden] {
	    @apply hidden;
	}
	.box {
            @apply flex-grow bg-white p-2 flow-root w-full overflow-x-hidden;
	    .line {
		@apply w-full;
		.email-addr {
		    @apply text-sm italic;
		}
		.date {
		    @apply font-bold text-sm;
		}
		.flags {
		    @apply font-bold text-sm;
		}
	    }
	    pre {
		@apply whitespace-pre-line;
	    }
            .thumbnail {
                img {
                    @apply w-auto max-w-full max-w-xs max-h-48;
                }
            }
            .thumbnail-missing {
                @apply float-left mr-2;
                img {
                    @apply w-16 h-16;
                }
            }
            .title {
                @apply font-bold my-2 text-lg leading-snug w-full;
            }
	    .tag-line {
		@apply text-sm leading-snug;
                .site {
		    @apply text-gray-400 whitespace-nowrap;
                }
	    }
            .desc {
                @apply font-serif text-gray-800 leading-snug mb-2;
		span {
		    @apply whitespace-normal;
		}
            }
	    .button {
		@apply border border-blue-600;
	    }
	    .toolbar {
                @apply flex flex-wrap w-full gap-x-1 justify-center;
                .button {
		    @apply border-0 text-white bg-purple-600;
                }
                .button-danger {
		    @apply bg-pink-600;
                }
                .button:focus, .button:hover {
		    @apply border-gray-600;
                }
	    }
	}
    }
    .footer {
	@apply text-sm text-gray-700 p-2 flex text-center;
	.links {
	    @apply w-1/2 text-left;
	}
	.copyright {
            @apply w-1/2 text-right;
        }
    }
}
@screen sm {
    .content {
	h1 {
            @apply text-3xl;
	}
	h2 {
            @apply text-3xl;
	}
	h3 {
            @apply text-2xl;
	}
	h4 {
            @apply text-xl;
	}
	h5 {
            @apply text-lg;
	}
	h6 {
            @apply text-lg;
	}
	p {
            @apply text-lg leading-relaxed;
	}
	ol {
            @apply text-lg;
	}
	ul {
            @apply text-lg;
	}
	blockquote {
            @apply text-lg leading-relaxed;
	}
    }

    .viewport {
	.header {
	    .nav {
                .button {
		    @apply px-4;
                }
	    }
	}
	.content {
	    .node-container {
		.message {
		    @apply flex-nowrap border-0;
		    .subject {
			@apply flex-grow;
		    }
		    .email-addr {
			@apply border-l border-gray-100 w-40 flex-none pl-2;
		    }
		    .date {
			@apply border-l border-gray-100;
		    }
		}
	    }
	    .box {
                .title {
                    @apply text-2xl w-auto;
                }
		.tag-line {
		    @apply text-base leading-normal;
		}
                .thumbnail {
		    @apply float-right ml-2;
                }
                .desc {
                    @apply leading-normal;
                }
            }
	}
    }
}
@screen md {
    .viewport {
	.content {
	    form {
		section.twoside {
		    @apply grid grid-cols-2;
		}
	    }
	    .box {
		img {
		    @apply max-w-md;
		}
		.thumbnail {
                    img {
			@apply max-w-lg max-h-64;
                    }
		}
		.url {
                    @apply w-auto;
                }
            }
	}
    }
}
@screen lg {
    html {
	@apply text-[18px];
    }
    .viewport {
        @apply max-w-screen-lg mx-auto;
    }
}
