@import "settings";

.socialblue--sky {
  .navbar-default:not(.navbar-second-line) {
    .container--navbar {
      max-width: 100%;
      padding: 0;
    }
  }

  .navbar-fixed-top {
    .navbar-nav {
      @include for-tablet-landscape-up {

        [dir='ltr'] & {
          padding-right: 1.625rem;
        }

        [dir='rtl'] & {
          padding-left: 1.625rem;
        }
      }
    }
  }

  &.mode-search {
    .navbar__open-search-block {
      @include for-tablet-landscape-up {
        transform: scale(100);
      }
    }
  }

  .navbar-secondary {
    width: 100%;
    min-height: 44px;
    box-shadow: none;

    .navbar-scrollable {
      width: 100%;
      height: 44px;

      @include for-tablet-landscape-up {
        border-radius: 0 $border-radius-extrasmall 0 0;

        // This style needs if secondary navigation have a lot of list items.
        // This will remove after load page on the navbar-secondary--sky.js file.
        overflow: hidden;
      }
    }

    .navbar-nav {
      display: flex;
      overflow-x: scroll;
      width: 100%;
      text-align: center;

      @include for-tablet-landscape-up {
        display: table;
        overflow: visible;

        [dir='rtl'] & {
          padding-right: 0;
          padding-left: 40px;
        }
      }

      li {
        position: relative;

        @include for-tablet-landscape-up {
          display: table-cell;
        }

        a, button, span:not(.caret) {
          position: relative;
          padding: 10px 20px;
          opacity: 1;
          border-bottom-width: 0;

          &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 3px;
            bottom: 0;
            left: 0;
            background: transparent;
          }

          &:hover,
          &:active,
          &:focus {
            background: transparent;
            color: #fff;

            &:after {
              background: #fff;
            }
          }

          &.is-active {
            background: #fff;
          }
        }

        &.active {
          a, button {
            background: #fff;
          }
        }
      }

      @include for-tablet-landscape-up {
        .caret {
          position: absolute;
          top: 50%;
          right: 15px;
          border-width: 6px 6px 0;
          border-top-color: #fff;
          transform: translateY(-50%);
          cursor: pointer;

          [dir='rtl'] & {
            right: auto;
            left: 15px;
          }

          &.active {
            transform: translateY(-50%) rotate(180deg);
          }
        }

        .visible-list {
          display: flex;
          height: 44px;
          align-items: center;
          justify-content: center;
          padding: 0 25px;

          a {
            display: block;
          }
        }

        .hidden-list {
          display: none;
          position: absolute;
          top: 100%;
          right: 0;
          padding: .5rem 0 .75rem;
          background: #fff;
          z-index: 10;
          border-top-left-radius: 0 !important;
          border-top-right-radius: 0 !important;

          [dir='rtl'] & {
            right: auto;
            left: 0;
          }

          li {
            display: block;
            text-align: left;

            [dir='rtl'] & {
              text-align: right;
            }

            a, button, span:not(.caret) {
              display: block;
              width: 100%;
              padding: .5rem 2rem;
              color: #9b9b9b;

              &:focus {
                background: transparent;
              }
            }
          }
        }
      }
    }
  }

  // Secondary navigation on the user/group pages.
  &.path-user,
  &.path-group {
    .layout--with-complementary {
      .navbar-secondary {
        @include for-tablet-landscape-up {
          flex: 0 0 (100%/1.5);
          max-width: (100%/1.5);
          border-radius: 5px 5px 0 0;
          order: 1;
        }
      }
    }
  }
}
