:root {
    --component-background-color: var(--gray-color);
    --component-background-color-inverse: var(--black-color);
}

.component {
    background-color: var(--component-background-color);
    color: var(--text-color);
    max-width: var(--media-size-full);
    position: relative;
    overflow: auto;
}

.base.component {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0px 1px 0px var(--box-shadow-color);
}

.primary.component {
    background-color: var(--primary-color);
    color: var(--text-color-inverse);
}

.secondary.component {
    background-color: var(--secondary-color);
    color: var(--text-color-inverse);
}

.success.component {
    background-color: var(--green-color);
    color: var(--text-color-inverse);
}

.warning.component {
    background-color: var(--yellow-color);
    color: var(--text-color);
}

.error.component {
    background-color: var(--red-color);
    color: var(--text-color-inverse);
}

.information.component {
    background-color: var(--blue-color);
    color: var(--text-color-inverse);
}