$top-padding: 1rem 0.75rem !default;
$top-shadow: none !default;

$top-brand-padding: 0 0.65rem !default;
$top-brand-color: inherit !default;
$top-brand-max-logo-width: 200px !default;

$top-link-radius: 6px !default;
$top-link-padding: 0.3125rem 0.9375rem !default;
$top-link-color: inherit !default;
$top-link-background: transparent !default;
$top-link-hover-background: createColor(rgba(169, 169, 169, 0.15)) !default;
$top-link-hover-color: inherit !default;
$top-link-active-background: transparent !default;
$top-link-active-color: inherit !default;

$top-social-padding: 0 0.65rem !default;
$top-social-margin: 0 6px !default;
$top-social-color: inherit !default;
$top-social-hover-color: inherit !default;

$top-button-padding: 0 0.65rem !default;

$top-burger-color: inherit !default;
$top-burger-width: 20px !default;
$top-burger-padding: 0 0.65rem !default;
$top-burger-bar-height: 2px !default;
$top-burger-bar-gap: 4px !default;
$top-burger-transition: 0.75s !default;

.top {
  --padding: #{$top-padding};
  --box-shadow: #{$top-shadow};

  align-items: center;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-flow: row nowrap;
  padding: var(--padding);
  position: relative;
  z-index: 40;

  &__brand, &__links, &__buttons, &__social, &__burger {
    --padding: 0;
    padding: var(--padding);
  }

  & > .container {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  &__brand {
    --padding: #{$top-brand-padding};
    --font-color: #{$top-brand-color};
    --max-width: #{$top-brand-max-logo-width};

    align-items: center;
    color: var(--font-color);
    display: flex;

    h1, h2, h3, h4, h5, h6 {
      margin-bottom: 0;
    }

    img {
      max-width: var(--max-width);
    }
  }

  &.is-static {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .is-end {
    margin-left: auto;
  }

  &__buttons {
    --padding: #{$top-button-padding};

    .button, .is-button-group .button {
      margin-bottom: 0;
    }
  }

  &__links {
    --background-color: #{$top-link-background};
    --font-color: #{$top-link-color};
    --border-radius: #{$top-link-radius};
    --link-padding: #{$top-link-padding};
    --text-align: start;

    --hover-background-color: #{$top-link-hover-background};
    --hover-font-color: #{$top-link-hover-color};
    --active-background-color: #{$top-link-active-background};
    --active-font-color: #{$top-link-active-color};

    text-align: var(--text-align);

    ul:not(.dropdown) > li {
      background-color: var(--background-color);
      border-radius: var(--border-radius);
      color: var(--font-color);
      cursor: pointer;
      position: relative;
      white-space: nowrap;

      a {
        color: inherit;
        display: block;
        padding: var(--link-padding);
      }

      &.has-dropdown a {
        padding-right: 0;
      }

      &.is-active {
        --background-color: var(--active-background-color);
        --font-color: var(--active-font-color);
      }

      &:hover {
        --background-color: var(--hover-background-color);
        --font-color: var(--hover-font-color);
        text-decoration: none;

        a {
          text-decoration: inherit;
        }
      }
    }

    & > ul {
      display: inline-flex;
      flex-flow: row wrap;
      list-style: none;
      margin: 0;
    }
  }

  &__social {
    --padding: #{$top-social-padding};
    --font-color: #{$top-social-color};
    --item-margin: #{$top-social-margin};

    --hover-font-color: #{$top-social-hover-color};

    & > ul {
      display: inline-flex;
      flex-flow: row wrap;
      list-style: none;
      margin: 0;
    }

    li {
      color: var(--font-color);
      margin: var(--item-margin);
      position: relative;

      &:hover {
        --font-color: var(--hover-font-color);
      }

      &:first-of-type {
        margin-left: 0;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }

    a {
      color: inherit;
    }
  }

  &__burger {
    --font-color: #{$top-burger-color};
    --padding: #{$top-burger-padding};
    --width: #{$top-burger-width};
    --bar-height: #{$top-burger-bar-height};
    --bar-gap: #{$top-burger-bar-gap};
    --transition-speed: #{$top-burger-transition};

    display: flex;

    span {
      display: flex;
      flex-flow: column;
      position: relative;
      width: var(--width);

      &:before, &:after {
        border-color: var(--font-color);
        border-style: solid;
        content: '';
        cursor: pointer;
        width: 100%;
      }

      &:before {
        border-width: var(--bar-height) 0 var(--bar-height);
        padding-bottom: var(--bar-gap);
      }

      &:after {
        border-width: 0 0 var(--bar-height);
        padding-top: var(--bar-gap);
      }
    }

    &.has-animate {
      span {
        &:before, &:after {
          transition: var(--transition-speed);
        }
      }
    }

    &.is-active {
      span {
        &:before, &:after {
          padding: 0;
          position: absolute;
        }

        &:before {
          border-width: var(--bar-height) 0 0;
          transform: rotate(405deg);
        }

        &:after {
          transform: rotate(-405deg);
        }
      }
    }
  }

  @mixin responsive-top {
    flex-flow: row wrap;

    .container {
      flex-flow: row wrap;
    }

    .top__brand {
      & + .top__links, & + .top__social, .top__buttons {
        padding-top: 1rem;
      }
    }

    &:not(.is-open) {
      .top__links, .top__social, .top__buttons {
        display: none;
      }
    }

    .top__links, .top__social, .top__buttons {
      order: 2;
      width: 100%;

      &:first-of-type {
        padding-top: 1rem;
      }

      ul:not(.dropdown) {
        display: flex;
        width: 100%;
      }
    }

    .top__links {
      ul {
        flex-direction: column;
        padding: 0.5rem 0;
      }

      .has-dropdown {
        display: flex;
        flex-direction: column;

        &.is-hoverable:hover, &.is-active {
          background-color: transparent;

          &.has-arrow::after {
            top: 17px;
          }

          & > .dropdown {
            background-color: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            position: relative;
          }
        }

        .dropdown__link {
          &:hover {
            background-color: var(--hover-background-color);
          }
        }
      }
    }

    .top__social {
      --padding: 0;

      ul {
        flex-direction: row;
        padding: 0.5rem 0.9375rem;
      }
    }

    .top__buttons {
      --padding: 0.5rem 0.9375rem;
    }

    .top__burger {
      --padding: #{$top-padding};
    }
  }

  &.is-mobile-responsive {
    @include small {
      @include responsive-top;
    }

    @include medium {
      .top__burger {
        display: none;
      }
    }
  }

  &.is-tablet-responsive {
    @media (max-width: calc(#{$large} - 1px)) {
      @include responsive-top;
    }

    @include large {
      .top__burger {
        display: none;
      }
    }
  }

}