@charset "utf-8";

/********
 * ITEM *
 ********/
*[data-expandable] {
    cursor: pointer;
}
*[data-expandable].expandable-on *[data-expandable-icon] {
    animation: expandable-icon-on 300ms ease;
    animation-fill-mode: forwards;
}
*[data-expandable].expandable-off *[data-expandable-icon] {
    animation: expandable-icon-off 300ms ease;
    animation-fill-mode: forwards;
}

/********
 * ICON *
 ********/
*[data-expandable-icon] {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 1em;
    border-bottom: .5em solid #333;
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
}
*[data-expandable-icon].size-small {
    border-bottom-width: .4em;
    border-left-width: .3em;
    border-right-width: .3em;
}
*[data-expandable-icon].color-grey {
    border-bottom-color: #999;
}
*[data-expandable-icon].color-white {
    border-bottom-color: #FFF;
}
*[data-expandable-icon].color-green {
    border-bottom-color: #228B22;
}
*[data-expandable-icon].color-blue {
    border-bottom-color: #178FE5;
}
*[data-expandable-icon][class*="center-"], *[data-expandable-icon][class*="docked-"] {
    position: absolute;
}
*[data-expandable-icon].center-y {
    top: 50%;
    margin-top: -.25em;
}
*[data-expandable-icon].center-x {
    left: 50%;
    margin-left: -.25em;
}
*[data-expandable-icon].docked-left {
    left: 1em;
    margin-left: auto;
}
*[data-expandable-icon].docked-left-zero {
    left: 0;
    margin-left: auto;
}
*[data-expandable-icon].docked-right {
    right: 1em;
}
*[data-expandable-icon].docked-right-zero {
    right: 0;
}
@keyframes expandable-icon-on {
    from {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(0deg);
    }
}
@keyframes expandable-icon-off {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}