@import "dxHelpers/reset";
@import "dxHelpers/text";

.container {
    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);

    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 var(--dx-g-page-padding-horizontal);
    background: repeating-linear-gradient(
        45deg,
        var(--primary-color),
        var(--primary-color) 20px,
        var(--secondary-color) 20px,
        var(--secondary-color) 40px
    );
}

.container_inner {
    height: 100%;
    display: flex;
    background: var(--primary-color);
    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
    color: white;
    font-weight: bold;
}

.container a {
    text-decoration: underline;
    transition: var(--dx-g-transition-hue-1x);
    margin-right: 4px;
}

.container a:hover {
    opacity: 0.8;
}

.container dx-icon {
    margin-right: var(--dx-g-spacing-sm);
    margin-top: var(--dx-g-spacing-2xs);
}