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

@banner-footer-background: #000000;

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

@banner-tab-button-background: @global-secondary-background;
@banner-tab-button-border-radius: 0;

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

  & .uk-banner-footer:extend(.uk-light all) {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: fade(@banner-footer-background, 50%);

    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
      -webkit-backdrop-filter: blur(30px) opacity(10%) brightness(90%);
      backdrop-filter: blur(30px) opacity(10%) brightness(90%);
    }

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

      & > 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:extend(.uk-text-truncate) {
          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-vertical;
            left: 50%;
            transform: translate(-50%, 50%);
            width: 0;
            height: 0;
            border-left: 2*@banner-tab-margin-vertical solid transparent;
            border-right: 2*@banner-tab-margin-vertical solid transparent;
            border-bottom: @banner-tab-margin-vertical solid @banner-tab-item-active-indicator;
          }
        }
      }
    }

    & .uk-button {
      height: 100%;
      background: @banner-tab-button-background;
      border-radius: @banner-tab-button-border-radius;

      &:hover {
        background: fade(@banner-tab-button-background, 80%);
      }
    }
  }
}
.uk-banner.dark {
  background: @background-secondary-background;
}