.sui-o-topbar {
  grid-area: top-bar;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  display: flex;
  z-index: $sui-z-index-o-topbar;
  height: $sui-l-topbar-height;
  width: 100%;
  background: $sui-color-brand-denim-100;
  transition: all .4s, filter 0s;
  background-color: $sui-color-app-background;

  @include suiMediaMax($sui-breakpoint-sm) {
    height: $sui-l-topbar-height-mobile;
    transition: all 0s;

    @include suiExpandNavState() {
      background: $sui-color-brand-denim;
    }
  }

  &__primary {
    display: flex;
    white-space: nowrap;
    width: $sui-l-topbar-width;
    padding: 0 $sui-space-md;
    transition: all 0.4s $sui-curve-easeInOutQuint;
    position: relative;

    @include suiShrinkNavState() {
      width: $sui-l-topbar-width-shrinked;
      padding: 0 $sui-space-xs;
    }

    &::before {
      @include suiMediaMin($sui-breakpoint-sm) {
        content: '';
        display: block;
        position: absolute;
        width: $sui-l-topbar-width;
        height: 100%;
        left: 0;
        top: 0;
        background: $sui-color-brand-denim;
        transition: all 0.4s $sui-curve-easeInOutQuint;

        @include suiShrinkNavState() {
          width: $sui-l-topbar-width-shrinked;
        }
      }
    }
  }

  &__platform {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
    top: 0;
    height: $sui-l-topbar-height;
    background-color: $sui-color-brand-denim-600;
    background-image: url($sui-image-path + '/illustration-cube-platform.svg');
    background-position: rem(140) rem(5);
    background-size: rem(60);
    background-repeat: no-repeat;
    border-bottom-right-radius: $sui-border-radius-lg;
    border-bottom-left-radius: $sui-border-radius-lg;
    padding: 0 $sui-space-sm;
    overflow: hidden;
    box-shadow: $sui-shadow-400;
    transition: all 0.2s $sui-curve-easeInOutQuint, background 0.6s $sui-curve-easeInOutCubic;

    @include suiShrinkNavState() {
      flex: none;
      width: 100%;
      background-position: rem(6) rem(-1);
      height: $sui-l-topbar-height-shrinked;
      border-radius: $sui-border-radius-lg;
      top: rem(6);

      &:hover {
        width: $sui-l-topbar-dropdown-width;
      }
    }

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
    }

    &::before {
      width: rem(60);
      height: rem(63);
      top: rem(15);
      left: rem(66);
      background-size: rem(60);
      background-repeat: no-repeat;
      background-image: url($sui-image-path + '/illustration-cube-platform.svg');
    }

    &::after {
      width: rem(60);
      height: rem(63);
      top: rem(25);
      left: rem(-10);
      background-size: rem(60);
      background-repeat: no-repeat;
      background-image: url($sui-image-path + '/illustration-cube-platform.svg');
    }

    &.as--dropdown {
      text-align: left;
      padding-right: $sui-space-lg;

      &::before,
      &::after {
        top: 50%;
        left: auto;
        width: rem(8);
        height: rem(2);
        background-color: white;
        transition: all 0.2s $sui-curve-easeInOutQuint;
      }

      &::before {
        transform: rotate(-45deg);
        right: rem(14);

        @include suiShrinkNavState() {
          opacity: 0;
        }
      }

      &::after {
        transform: rotate(45deg);
        right: rem(18);

        @include suiShrinkNavState() {
          opacity: 0;
        }
      }

      &:hover,
      &:focus {
        background-position: rem(130) rem(2);
      }

      // Dropdown button remove background-image on active state
      &:active {
        background-image: url($sui-image-path + '/illustration-cube-platform.svg');
      }
    }
  }

  &__platform-label {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    color: $sui-color-brand-denim-100;
    font-size: $sui-font-size-ms;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s $sui-curve-easeInOutQuint;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    @include suiShrinkNavState() {
      opacity: 0;
    }

    small {
      display: block;
      text-transform: uppercase;
      font-weight: normal;
      font-size: $sui-font-size-xxs;
      margin-bottom: $sui-space-xxs*-1;

      @include suiShrinkNavState() {
        display: none;
      }
    }
  }

  @at-root {
    #{&}__platform:hover &__platform-label,
    #{&}__platform.as--dropdown:hover::before,
    #{&}__platform.as--dropdown:hover::after {
      @include suiShrinkNavState() {
        opacity: 1;
      }
    }
  }

  &__platform.as--dropdown &__platform-label {
    text-align: left;
  }

  &__button {
    flex: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    min-width: rem(48);
    font-size: $sui-font-size-ml;
    color: inherit;
    text-decoration: none;

    &.as--active::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: rem(3);
      background: $sui-color-primary;
    }

    &.as--toggle-menu {
      span {
        @include suiMediaMax($sui-breakpoint-sm) {
          position: relative;
          width: rem(18);
          height: rem(12);
          box-shadow: inset 0 rem(5) 0 0 $sui-color-brand-denim-100, inset 0 rem(-5) 0 0 $sui-color-brand-denim-100, inset 0 0 0 rem(12) $sui-color-brand-denim-800;
          transition: box-shadow 0.2s $sui-curve-easeInOutQuint;

          &::before,
          &::after {
            content: '';
            display: block;
            width: rem(18);
            height: rem(2);
            position: absolute;
            background: $sui-color-brand-denim-800;
            transform: translate(0);
            left: 0;
            transition: all 0.2s $sui-curve-easeInOutQuint;
          }

          &::before {
            top: 0;
          }

          &::after {
            bottom: 0;
          }
        }

        @include suiMediaMax($sui-breakpoint-sm) {
          @include suiExpandNavState() {
            box-shadow: inset 0 rem(5) 0 0 $sui-color-brand-denim-800, inset 0 rem(-5) 0 0 $sui-color-brand-denim-800, inset 0 0 0 rem(12) $sui-color-brand-denim-800;

            &::before {
              transform: rotate(45deg);
              top: rem(5);
              background: $sui-color-brand-denim-100;
            }

            &::after {
              transform: rotate(-45deg);
              bottom: rem(5);
              background: $sui-color-brand-denim-100;
            }
          }
        }
      }
    }

    @include suiMediaMin($sui-breakpoint-sm) {
      &.as--toggle-menu {
        display: none;
      }
    }
  }

  &__logo {
    margin-left: auto;
    align-self: center;
    padding: $sui-space-md;

    @include suiMediaMin($sui-breakpoint-sm) {
      display: none;
    }
  }
}