.widgets {
    margin: 2rem 0;
}

.widgets__cloud {
    margin: $micro calc(-$micro / 2);
}

.widgets__item {
    color: $darkGrey;
    border: 2px solid $darkGreen;
    border-radius: $borderRadius;
    padding: calc($micro /2) $micro;
    margin: calc($micro / 2);
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    display: inline-block;
    font-weight: normal;
}

.widgets__item:hover, .widgets__item_active {
    background: $darkGreen;
    color: white !important;
}

.widgets__container {
    margin: 1em 0;
    background: $lightGrey;
    border-radius: $borderRadius;
    transition: height .15s ease;
}

.widget {
    padding: .5em 1em;
    display: none;
}

.widget_open {
    display: block;
}

.widget_closing {
    display: block;
    animation: widgetOpacity .15s ease forwards reverse;
}

.widget_opening {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: widgetOpacity .15s .05s ease forwards;
}

@keyframes widgetOpacity {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.widget pre {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.widget h3 {
    margin-top: 0 !important;
}