sudara/alonetone

header#site_header {
  background-color: $site-header-background;
  box-shadow: $site-header-box-shadow;
  height: 60px;
  .header_inner {
    position: relative;
    display: flex;
    @media #{$mobile} {
      width: 100%;
      padding: 0 8px;
    }
    .header_logo {
      background: $site-icon-background;
      margin-top: 12px;
      display: block;
      width: 48px;
      height: 36px;
      flex-shrink: 0;
      height: 36px;
      background-size: 100%;
    }
    > .header_search {
      position: relative;
      margin-left: auto;
      margin-right: $baseline;
      display: flex;
      height: $baseline * 1.5;
      margin-top: $baseline / 2;
      margin-top: 12px;
      box-sizing: border-box;
      @media #{$mobile} {
        margin-right: $baseline / 2;
        padding-left: $baseline / 2;
      }
      #search_form {
        display: block;
        height: 100%;
        #query {
          margin-bottom: 0;
          height: 100%;
          font-size: 14px;
          font-family: $medium-sans-font;
          width: 160px;
          padding: 0;
          padding-left: 8px;
          padding-right: 36px;
          background-color: $site-header-input-background;
          color: $site-header-input-text;
          border: 0;
          border-radius: 3px;
          transition: width 0.4s, background-color 0.4s, border-width 0.4s;
          line-height: normal;
          &:focus {
            border-width: 0px;
            width: 256px;
            background-color: $site-header-input-background-focus;
            border: 2px solid $accent;
          }
          @media #{$mobile} {
            float: right;
            padding-right: 0;
            display: none;
            width: 100%;
            float: right;
            &:focus {
              width: 100%;
            }
          }
        }
      }
      #search_button {
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 6px;
        background-image: $site-header-search-magnifying-glass-image;
        &:hover {
          background-image: image-url(
            "svg/icon_search_magnifying_glass_active.svg"
          );
        }
        @media #{$mobile} {
          display: none;
        }
      }
      #mobile_search_reveal_button {
        display: none;
        width: 36px;
        height: 36px;
        background-color: $site-header-mobile-search-reveal-button-background;
        border-radius: 3px;
        background-image: $site-header-search-magnifying-glass-image;
        background-position: center;
        background-repeat: no-repeat;
        @media #{$mobile} {
          display: block;
        }
      }
    }
    .login_button {
      @include default_button(primary);
      height: 36px;
      line-height: 38px;
      flex-shrink: 0;
      margin-top: 12px;
    }
    .user_dropdown {
      position: relative;
      .profile_link {
        z-index: 100;
        display: block;
        box-sizing: border-box;
        width: 56px;
        margin-top: $baseline / 2;
        height: 36px;
        padding: 2px;
        border-radius: 3px;
        background-color: $profile-link-background;
        background-image: $profile-link-background-image;
        background-repeat: no-repeat;
        background-position: right 6px center;
        img {
          width: 32px;
          height: 32px;
        }
      }
      .user_dropdown_menu {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
        width: 1000px;
        max-width: 350px;
        background-color: $site-header-user-dropdown-background;
        box-shadow: $site-header-user-dropdown-shadow;
        border-radius: 0px 0px 6px 6px;
        color: $site-header-user-dropdown-list-item-text;
        @media #{$mobile} {
          width: 300px;
        }
        .user_dropdown_menu_header {
          height: 60px;
          display: flex;
          padding-left: $baseline / 1.5;
          font-size: 14px;
          font-weight: bold;
          line-height: 62px;
          img {
            display: block;
            margin-left: auto;
            margin-right: 20px;
            margin-top: 12px;
            height: 36px;
            width: 36px;
            border-radius: 2px;
          }
        }
        ul.user_dropdown_menu_items {
          padding-top: 0;
          margin-top: 0;
          margin-bottom: 0;
          li {
            background-color: $site-header-user-dropdown-list-item-background;
            padding-left: $baseline;
            display: block;
            font-size: 14px;
            font-weight: normal;
            line-height: 40px;
            display: block;
            height: 40px;
            margin-bottom: 2px;
            &:last-child {
              margin-bottom: 0;
            }
            &:first-child {
              &:hover {
                a.edit_profile_item {
                  border: 1px solid $accent;
                  background: transparent;
                }
              }
            }
            a.edit_profile_item {
              float: right;
              margin-right: $baseline / 2;
              @include default_button();
              height: 30px;
              margin-top: 5px;
              line-height: 1;
              padding-top: 9px;
              background: transparent;
              color: $site-header-user-dropdown-profile-edit-text;
              border: 1px solid $site-header-user-dropdown-profile-edit-border;
            }
          }
        }
        .user_dropdown_menu_bottom_links {
          display: flex;
          justify-content: space-between;
          padding-left: 16px;
          padding-right: 16px;
          padding-top: $baseline / 2;
          margin-bottom: $baseline / 2;
          a.switch_to_theme {
            width: 120px;
            height: 28px;
            background-color: $accent;
            border-radius: 4px;
            position: relative;
            &:hover {
              text-decoration: none;
            }
            .switcher_label {
              color: $grey1200;
              font-size: 11px;
              font-weight: bold;
              padding-top: 9px;
              padding-left: 14px;
            }
            .switcher_inner {
              background-color: #fff;
              border-radius: 1.5px;
              width: 56px;
              height: 22px;
              box-shadow: 0px 2px 8px rgba(53, 53, 53, 0.33), 0px 2px 2px rgba(53, 53, 53, 0.33);
              position: absolute;
              bottom: 3px;
              right: 3px;
            }
            &.switch_to_light {
              background-color: $accent;
              .switcher_label {
                color: $grey1200;
              }
              .switcher_inner {
                bottom: 3px;
                right: 3px;
              }
            }
            &.switch_to_dark {
              background-color: $grey400;
              .switcher_inner {
                bottom: 3px;
                left: 3px;
              }
              .switcher_label {
                color: $white;
                padding-right: 14px;
                text-align: right;
              }
            }
          }
          a.logout_item {
            @include default_button();
            background-color: $site-header-user-dropdown-logout-background;
            color: $site-header-user-dropdown-logout-text;
            height: 28px;
            line-height: 30px;
            width: 100px;
            margin-left: auto;
          }
        }
      }
    }
  }
}

#HW_frame_cont {
  @media #{$mobile} {
    max-width: 320px;
  }
}