$accordion-border: 1px solid #dddddd;
$accordion-background-color: #f0f0f0;
$accordion-toolbar-padding: 0 10px;
$accordion-caret-img: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNi45NzgiIGhlaWdodD0iMTcuMzE5IiB2aWV3Qm94PSIwIDAgMjYuOTc4IDE3LjMxOSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzQwNjE4MTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9IlBhdGhfNSIgZGF0YS1uYW1lPSJQYXRoIDUiIGNsYXNzPSJjbHMtMSIgZD0iTTI4LjE3NS0xMi4xODhhMS4wODEsMS4wODEsMCwwLDAsMC0xLjUyM0wyNS40LTE2LjQ3M2ExLjA2MSwxLjA2MSwwLDAsMC0xLjUwNywwTDE1LTcuNTg0bC04Ljg5LTguODlhMS4wNjEsMS4wNjEsMCwwLDAtMS41MDcsMEwxLjgyNS0xMy43MTFhMS4wODEsMS4wODEsMCwwLDAsMCwxLjUyM0wxNC4yNDcuMjE4YTEuMDYxLDEuMDYxLDAsMCwwLDEuNTA3LDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS41MTEgMTYuNzg3KSIvPgo8L3N2Zz4K';

@mixin hc-accordion() {
    display: block;
    background: transparent;
    color: currentColor;
    box-sizing: border-box;
}

@mixin hc-accordion-toolbar-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

@mixin hc-accordion-toolbar-wrapper-pointer {
    cursor: pointer;
}

@mixin hc-accordion-trigger {
    background: transparent;
    border: none;
    color: deepskyblue;
    cursor: pointer;
    height: 50px;
    outline: none;
    padding: 0;
    position: relative;
    width: 50px;

    &::after {
        background-image: url($accordion-caret-img);
        background-repeat: no-repeat;
        background-size: contain;
        box-sizing: border-box;
        content: '';
        display: block;
        height: 8.5px;
        margin-top: 2px;
        pointer-events: none;
        transform: rotate(180deg);
        transition: transform 500ms cubic-bezier(0.25, 0.8, 0.25, 1);
        width: 13px;
    }
}

@mixin hc-accordion-trigger-right() {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: auto;
    order: 1;
}

@mixin hc-accordion-trigger-closed() {
    transform: rotate(0deg);
}

@mixin hc-accordion-collapse() {
    display: block;
    overflow: hidden;
}

@mixin hc-accordion-toolbar() {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: $accordion-toolbar-padding;
    white-space: nowrap;
    width: 100%;
}

@mixin hc-accordion-toolbar-right() {
    order: 0;
}

@mixin hc-accordion-content() {
    outline: 0;
    padding: 12px;
}