@banner-background: @ciel-color;
@banner-background-gradient: none;
@banner-mode: dark;

@banner-footer-background: transparent;

@banner-tab-gutter: 60px;
@banner-tab-margin-bottom: @global-small-margin;
@banner-tab-divider: @global-border-width solid @global-border;
@banner-tab-divider-height: @global-line-height;
@banner-tab-item-hover-color: @global-secondary-background;
@banner-tab-item-active-color: @global-secondary-background;
@banner-tab-item-active-indicator: @global-background;

.uk-banner:extend(.uk-section) {
  background: @banner-background;
  position: relative;

  & .uk-banner-footer {
    background: @banner-footer-background;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    & ul.uk-banner-tab:extend(.uk-flex) {
      list-style: none;
      margin-bottom: @banner-tab-margin-bottom;

      & > li {
        &:not(:first-child) {
          margin-left: @banner-tab-gutter;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            left: -1 * (@banner-tab-gutter/2);
            transform: translateX(-100%);
            border-left: @banner-tab-divider;
            height: @banner-tab-divider-height;
          }
        }

        a {
          text-transform: uppercase;
          text-decoration: none;
        }

        &:hover a {
          color:@banner-tab-item-hover-color;
        }

        &.uk-active a {
          color: @banner-tab-item-active-color;
          font-weight: @text-bold-weight;
          position: relative;

          &:after {
            content: '';
            position: absolute;
            bottom: -@banner-tab-margin-bottom;
            left: 50%;
            transform: translate(-50%, 50%);
            width: 0;
            height: 0;
            border-left: 2*@banner-tab-margin-bottom solid transparent;
            border-right: 2*@banner-tab-margin-bottom solid transparent;
            border-bottom: @banner-tab-margin-bottom solid @banner-tab-item-active-indicator;
          }
        }
      }
    }
  }
}

.uk-banner:extend(.uk-light all) when (@banner-mode = light) {}