@mixin attribution() { .esri-attribution { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; background-color: rgba($background-color, 0.8); line-height: 16px; // TODO: refactor to let Attribution inherit line-height. font-size: $font-size--small; } .esri-attribution__link { text-decoration: none; color: currentColor; &:hover, &:active, &:visited, &:focus { color: currentColor; } } .esri-attribution__sources { flex: 1 0; align-self: flex-start; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: $font-weight--light; } .esri-attribution__sources[role="button"] { font-size: 1em; } .esri-attribution__powered-by { align-self: flex-end; padding: 0 5px; text-align: right; white-space: nowrap; font-weight: $font-weight; } .esri-attribution--open { z-index: 2; } .esri-attribution__sources--open { white-space: normal; } } @if $include_Attribution == true { @include attribution(); }