@import '~normalize.css/normalize.css';
@import '~milligram/dist/milligram.min.css';
@import '~font-awesome/css/font-awesome.min.css';
@import '~../flyout/flyout.css';

/* skeleton resets */

html { font-size: 100%; }
body { font-size: 1rem; }
h1 {
    font-size: 3.5rem;
    margin: 1rem 0 0 0;
}
h3 { font-size: 2.5rem; }

/* defaults */

body {
    min-width: 280px;
    padding: 75px 20px;
    text-align: center;
}

body > img {
    border-radius: 20px;
    transform: rotate(-5deg);
}

a {
    display: block;
}

p {
    margin-bottom: 1rem;
}

.examples {
    margin: 50px 0 75px;
}

button {
    padding: 0 1.5rem;
    margin: 0;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1rem;
}

button + button {
    margin-left: 4px;
}

/* flyouts */

.flyout button {
    padding: 0 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.8rem;
}

.flyout-foobar0 {
    width: 250px;
    text-align: center;
}

.flyout-foobar2 {
    width: 250px;
}

.flyout-foobar3 p {
    margin: 0;
}

.has-flyout {
    margin: 2px;
}

/* alignto */

.alignto {
    overflow: hidden;
    width: 160px;
    margin: 1rem auto 1.5rem;
    padding: 5px;
}

.alignto > div > div {
    float: left;
    width: 30px;
    height: 30px;
}

.alignto .alignto__clickable {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.4rem;
    border-radius: 4px;
}

.alignto__clickable:hover {
    background: #606c76;
    color: white;
}

.alignto__clickable.alignto__clickable--topright i { transform: rotate(45deg); }
.alignto__clickable.alignto__clickable--topleft i { transform: rotate(-45deg); }
.alignto__clickable.alignto__clickable--righttop i { transform: rotate(-45deg); }
.alignto__clickable.alignto__clickable--rightbottom i { transform: rotate(45deg); }
.alignto__clickable.alignto__clickable--bottomright i { transform: rotate(-45deg); }
.alignto__clickable.alignto__clickable--bottomleft i { transform: rotate(45deg); }
.alignto__clickable.alignto__clickable--lefttop i { transform: rotate(45deg); }
.alignto__clickable.alignto__clickable--leftbottom i { transform: rotate(-45deg); }

.alignto__clickable.alignto__clickable--topmiddle,
.alignto__clickable.alignto__clickable--bottommiddle,
.alignto__clickable.alignto__clickable--rightmiddle,
.alignto__clickable.alignto__clickable--leftmiddle {
    position: relative;
}

.alignto__clickable.alignto__clickable--topmiddle { top: -5px; }
.alignto__clickable.alignto__clickable--bottommiddle { bottom: -5px; }
.alignto__clickable.alignto__clickable--rightmiddle { right: -5px; }
.alignto__clickable.alignto__clickable--leftmiddle { left: -5px; }