.pax-picker {
  @include breakpoint(sm) {
    display: flex;
  }

  fieldset {
    margin-left: 0;
    margin-right: 0;
  }

  .pax-picker-room {
    @include breakpoint(sm) {
      width: calc(#{percentage(1 / 3)});
      margin-right: $margin-normal;
    }

    border: 1px solid $color-tui-grey-25;
    border-radius: $border-radius-base;
    padding: 11px 11px 13px;
  }

  .title {
    display: flex;
    align-items: baseline;
    padding-left: $margin-half;
    padding-right: $margin-half;

    svg {
      position: relative;
      top: $border-radius-small;
      color: $color-blue-400;
      height: 22px;
      margin-right: $margin-half;
    }

    h3 {
      @include font-size(16);
      margin-bottom: 0;
    }
  }

  .pax-picker-section {
    width: 100%;
    display: flex;
    justify-content: space-between;

    &.adults {
      margin-bottom: 25px;
    }

    .pax-labels {
      margin-top: $border-radius-small;
    }
  }

  .pax-actions {
    display: flex;

    label {
      @include font-size(26);
      height: $margin-triple;
      line-height: $margin-triple;
      width: 40px;
      margin: 0 4px;
      border-radius: $border-radius-base;
      border: 1px solid $color-tui-grey-25;
      text-align: center;
    }

    .icon {
      @include font-size(30);
      text-align: center;
      color: $color-white;
      background: $color-blue-500;
      border-radius: $border-radius-base;
      width: $margin-triple;
      height: $margin-triple;
      line-height: $margin-triple;
      cursor: pointer;
      font-style: normal;

      &.disabled {
        background: $color-white;
        color: $color-blue-500;
        border: 1px solid $color-blue-500;
      }
    }
  }

  .age-selector-container {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-top: 1px solid $color-tui-grey-25;
    padding: 0;
    margin-top: 15px;

    .age-selector-title {
      margin-left: auto;
      margin-right: auto;
      padding-left: $margin-half;
      padding-right: $margin-half;

      span {
        @include font-size(13);
      }
    }

    .age-selector {
      color: $color-white;
      background: $color-blue-500
        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggZD0iTTkuNSAxOGExIDEgMCAwMS0uNzA3LTEuNzA3TDEzLjA4NiAxMiA4Ljc5MyA3LjcwN2ExIDEgMCAwMTEuNDE0LTEuNDE0bDUgNWExIDEgMCAwMTAgMS40MTRsLTUgNUEuOTk2Ljk5NiAwIDAxOS41IDE4eiIgaWQ9ImEiLz48L2RlZnM+PHVzZSBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMyA1KSIvPjwvc3ZnPg==)
        no-repeat right 10px center;
      padding-right: 54px;
      margin-right: 0;
    }
  }

  .append-room {
    padding-left: $margin-double;
    padding-right: $margin-double;
    text-transform: none;
    cursor: $cursor-disabled;
    background: $input-bg-disabled;
    border: 1px dotted $color-blue-300;
    border-radius: $border-radius-base;
    width: 100%;
    margin-top: $margin-normal;
    justify-content: center;
    height: 98px;

    &-icon {
      display: none;
      @include font-size(26);
      padding: 0;
      background: $input-bg-disabled;
      width: 30px;
      height: 30px;
      color: #fff;
      border-radius: 50%;
      text-align: center;
    }

    .thrash-container {
      width: $margin-double;
    }

    @include breakpoint(sm) {
      width: calc(#{percentage(1 / 3)});
    }
  }
}