////
/// Site Background Color
///
/// @group  Components\Background
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

.app-footer {
    display: flex;
    flex-direction: column;
    color: white;
    background-color: var(--footer--background-color);

    &__credit {
        margin: 0;
    }

    &--fixed {
        @include screen('desktop') {
            position: fixed;
            width: 100%;
            bottom: 0;
            z-index: -1;
        }
    }

    &__container {
        order: 2;
    }

    &__sidebar {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
    }

    &__widgets {
        display: grid;
        grid-column-gap: var(--footer--widgets--gutter);
        grid-row-gap: var(--footer--widgets--gutter);
        grid-template-columns: var(--footer--widgets--layout);
        padding-top: var(--footer--padding);
        padding-bottom: var(--footer--padding);
    }

    &__widget {
        font-size: var(--footer--widgets--font-size);
        line-height: var(--footer--widgets--line-height);

        &__title {
            padding: 0;
            margin-bottom: 0.5em;

            font-size: var(--footer--widgets--title--font-size);
            line-height: var(--footer--widgets--title--line-height);
        }
    }
}

.bottom-bar {
    order: 5;
    padding: 0.6em 0;
    background-color: #000000;
    color: white;
}
