// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.search-forum-options {
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;

  &__input-group {
    display: block;
    margin: 10px auto;
    width: 100%;

    // reset global label style
    text-transform: initial;
    font-weight: initial;

    @media @desktop {
      width: 300px;
      position: relative;
    }

    &--buttons {
      display: flex;

      @media @desktop {
        padding-left: 40px;
        padding-right: 40px;
      }
    }
  }

  &__label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    white-space: nowrap;

    @media @desktop {
      position: absolute;
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 0;
      top: 0;
      right: 100%;
      height: 100%;
    }
  }
}

// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.search-forum-options {
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;

  &__input-group {
    display: block;
    margin: 10px auto;
    width: 100%;
    padding: 0 10px;

    // reset global label style
    text-transform: initial;
    font-weight: initial;

    @media @desktop {
      width: 300px;
      position: relative;
    }

    &--buttons {
      display: flex;
      padding-left: 5px; // remaining 5px is provided by the buttons themselves
      padding-right: $padding-left;

      @media @desktop {
        padding-left: 40px;
        padding-right: 40px;
      }
    }
  }

  &__label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    white-space: nowrap;

    @media @desktop {
      position: absolute;
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 0;
      top: 0;
      right: 100%;
      height: 100%;
    }
  }
}

Add some paddings for mobile search form
Add some paddings for mobile search form
