@use 'utils/variables';
@use 'utils/functions';

.AbstractList {
    padding: 1rem 2rem 2rem 2rem;
    transition: all 0.4s ease-in-out 0s;

    .AbstractList__header {
        display: flex;
        flex-direction: row;
        padding: 0.5em 0;
        border-bottom: solid 1px rgba(0, 0, 0, 0.1);
        font-size: 1.1em;
        font-weight: bold;

        .AbstractList__header-label {
            display: inline-block;
        }
    }

    .AbstractList__body {
        background: variables.$bg--gray;

        .AbstractList__loading {
            padding: 40px;
            text-align: center;
        }

        .AbstractList__empty {
            margin-top: 1rem;
            background: functions.alpha-color(variables.$white, 0.5);
            color: variables.$gray;
            font-size: 1.6rem;
            text-align: center;

            span {
                display: inline-block;
                width: 100%;
                height: 100%;
                padding-top: 20px;
                padding-bottom: 20px;
            }
        }
    }

    .AbstractList__footer {
        display: flex;
        height: auto;
        align-items: center;
        justify-content: flex-end;
        padding: 5px;
        border-top: solid 1px rgba(0, 0, 0, 0.1);
        background: variables.$white;

        .btn-tertiary {
            color: variables.$dark-gray;

            &.disabled {
                opacity: 0.5;
            }
        }

        .counter {
            margin-bottom: 2px;
            color: variables.$dark-gray;
            font-size: 1.1em;
        }
    }
}
