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

@layer components {
    .link {
        @apply underline cursor-pointer;
    }
}

.cursor-grab-all, .cursor-grab-all * { cursor: grab; }
.cursor-grabbing-all, .cursor-grabbing-all * { cursor: grabbing; }
.cursor-crosshair-all, .cursor-crosshair-all * { cursor: crosshair; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* home page */

.img-swipe { display: inline-block; }
.img-swipe .img-default { display: initial; }
.img-swipe .img-hover { display: none; }
.img-swipe:hover .img-default { display: none; }
.img-swipe:hover .img-hover { display: initial; }

/* blog */

.blog-article img {
    width: 100%;
    border-radius: .5rem;
}

.blog-article img + em, .blog-article img + br + em {
    display: block;
    margin-top: -32px;
    font-size: .8888889em;
    text-align: center;
}

.blog-article img + br + em {
    margin-top: -64px;
}

/* context-menu, from https://tailwindcomponents.com/component/nestable-dropdown-menu */

.context-menu li > ul                                  { transform: translatex(100%) scale(0) }
.context-menu li:hover > ul                            { transform: translatex(101%) scale(1) }
.context-menu li > span svg.context-menu-chevron       { transform: rotate(-90deg) }
.context-menu li:hover > span svg.context-menu-chevron { transform: rotate(-270deg) }


/* animations */

/* from https://codepen.io/chrislang/pen/pvPpQb */
.hover\:animate-flip-h, .hover\:animate-flip-v {
    transition: .6s;
    transform-style: preserve-3d;
}
.hover\:animate-flip-h:hover {
    transform: rotateY(180deg);
}
.hover\:animate-flip-v:hover {
    transform: rotateX(180deg);
}

/* Vectual overrides */

.vectual_title { display: none; }
.vectual_background { fill: transparent !important; pointer-events: none; }
.vectual_bars0, .vectual_color_0, .vectual_bars10, .vectual_color_10 { fill: #ea5545 !important; }
.vectual_bars1, .vectual_color_1, .vectual_bars11, .vectual_color_11 { fill: #27aeef !important; }
.vectual_bars2, .vectual_color_2, .vectual_bars12, .vectual_color_12 { fill: #87bc45 !important; }
.vectual_bars3, .vectual_color_3, .vectual_bars13, .vectual_color_13 { fill: #edbf33 !important; }
.vectual_bars4, .vectual_color_4, .vectual_bars14, .vectual_color_14 { fill: #b33dc6 !important; }
.vectual_bars5, .vectual_color_5, .vectual_bars15, .vectual_color_15 { fill: #ef9b20 !important; }
.vectual_bars6, .vectual_color_6, .vectual_bars16, .vectual_color_16 { fill: #bdcf32 !important; }
.vectual_bars7, .vectual_color_7, .vectual_bars17, .vectual_color_17 { fill: #f46a9b !important; }
.vectual_bars8, .vectual_color_8, .vectual_bars18, .vectual_color_18 { fill: #ede15b !important; }
.vectual_bars9, .vectual_color_9, .vectual_bars19, .vectual_color_19 { fill: #ccc !important; }
.vectual_pie_text { font-size: 16px !important; }

/* [Elm Syntax Highlight](https://pablohirafuji.github.io/elm-syntax-highlight) styles, see frontend/src/Components/Molecules/Editor.elm */

.elmsh.container {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
}

.elmsh .view-container,
.elmsh .textarea {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    font-family: monospace;
    letter-spacing: normal;
    word-spacing: normal;
    background: transparent;
    white-space: pre;
}

.elmsh .view-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.elmsh .textarea {
    position: relative;
    z-index: 2;
    padding: 10px;
    width: 100%;
    resize: none;
    color: rgba(0, 0, 0, 0);
}

.elmsh .textarea:focus {
    outline: none;
}

.elmsh .textarea-lc {
    padding-left: 50px;
}

.elmsh pre.elmsh {
    padding: 10px;
    margin: 0;
    text-align: left;
    overflow: auto;
}

.elmsh code.elmsh {
    padding: 0;
}

.elmsh .elmsh-line:before {
    content: attr(data-elmsh-lc);
    display: inline-block;
    text-align: right;
    width: 40px;
    padding: 0 10px 0 0;
    opacity: 0.3;
}

/* GitHub theme for [Elm Syntax Highlight](https://pablohirafuji.github.io/elm-syntax-highlight) */

.elmsh { color: #24292e; background: #ffffff; }
.elmsh .textarea {caret-color: #24292e;}
.elmsh .textarea::selection { background-color: rgba(0,0,0,0.2); }
.elmsh-hl { background: #fffbdd; }
.elmsh-add { background: #eaffea; }
.elmsh-del { background: #ffecec; }
.elmsh-comm { color: #969896; }
.elmsh1 { color: #005cc5; }
.elmsh2 { color: #df5000; }
.elmsh3 { color: #d73a49; }
.elmsh4 { color: #0086b3; }
.elmsh5 { color: #63a35c; }
.elmsh6 { color: #005cc5; }
.elmsh7 { color: #795da3; }

/* from https://webcode.tools/generators/css/keyframe-animation */

.hover\:animate-wobble-t:hover {
    animation: wobble-t 2s ease 0s 1 normal forwards;
}
@keyframes wobble-t {
    0%,
    100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }
    15% { transform: translateX(-5px) rotate(6deg); }
    30% { transform: translateX(2px) rotate(-6deg); }
    45% { transform: translateX(-2px) rotate(3.6deg); }
    60% { transform: translateX(1px) rotate(-2.4deg); }
    75% { transform: translateX(-1px) rotate(1.2deg); }
}

.hover\:animate-jello-h:hover {
    animation: jello-h 2s ease 0s 1 normal forwards;
}
@keyframes jello-h {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); }
    50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); }
    75% { transform: scale3d(1.05, 0.95, 1); }
    100% { transform: scale3d(1, 1, 1); }
}
