<commit_before>@import "variables";
@import "bootstrap";
@import "icons";

.beverages-container {
  @extend body;
  @extend .container-fluid;

  .beverage {
    padding: 12px;
    border-top: solid 1px $border-color;
    background-color: $white;
    &:hover {
      @each $bev-variant, $icon-map in $bev-variants {
        &.#{$bev-variant} {
          background-color: map-get($icon-map, hover-color);
        }
      }
    }

    .bev-icon-with-back {
      float: left;
      margin-top: -2px;
      margin-right: 5px;
    }

    .headers {
      @extend .col-xs-12;
      @extend .col-md-5;

      .name {
        @extend h4;
      }

      .brand {
        @extend h5;
        @extend .text-muted;
        display: none;
      }
    }

    .actions {
      text-align: right;
    }

    .more {
      @extend .col-xs-7;
      @extend .col-md-4;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .strength {
      @extend .col-xs-5;
      @extend .col-md-3;

      @extend .row;

      .moment, .theine-level {
        @extend .col-lg-6;
      }

      .moment {
        @extend .col-xs-12;
        text-align: right;

        ul {
          @extend .list-inline;
          margin-bottom: 0;

          > li {
            @extend .list-inline-item;
          }
        }
      }

      .theine-level {
        @extend .hidden-sm-down;

        progress {
          @extend .progress;

          &.unknown {
            @extend .progress-striped;
            @include progress-variant($text-muted);
            opacity: 0.25;
          }
          &.none, &.low {
            @include progress-variant($progress-bar-success-bg);
          }
          &.medium, &.high {
            @include progress-variant($progress-bar-warning-bg);
          }
          &.coffee {
            @include progress-variant($progress-bar-danger-bg);
          }
        }
      }
    }

    .preparation {
      text-align: center;

      @extend .col-xs-12;
      @extend .col-lg-2;

      @extend .row;
      .prep-info {
        @extend .col-xs-6;
        @extend .col-lg-12;
      }
    }

    &:not(.detailed) {
      .strength {
        .theine-level {
          @extend .hidden-md-down;
        }
      }

      .preparation {
        display: none;
      }

      p.note {
        display: none;
      }
    }

    &.detailed {
      .headers {
        .bev-icon-with-back {
          @extend .fa-2x;
        }

        .brand {
          display: initial;
        }
      }

      .more {
        @extend .col-md-3;
        white-space: inherit;
        overflow: inherit;

        .note-tip {
          display: none;
        }
      }

      .strength {
        @extend .col-lg-2;

        .moment, .theine-level {
          text-align: center;

          @extend .col-xs-6;
          @extend .col-sm-12;
        }
      }
    }
  }

  .filters {
    padding: 12px;
    box-shadow: 0 8px 6px -6px #888;
  }

  //* Sliding animation */
  .slide {
    transition: 0.4s;

    &.up {
      overflow: hidden;
      max-height: 0;
      margin: {
        top: 0;
        bottom: 0;
      }
      padding: {
        top: 0;
        bottom: 0;
      }
      border: {
        top-width: 0;
        bottom-width: 0;
      }
    }
  }

  //* Utility classes */
  .btn-plain {
    @extend .btn-link;
    color: inherit;
    padding: 0;
  }

  .pull-right {
    float: right;
  }
}
<commit_msg>Review the margins of the filter toolbar<commit_after>@import "variables";
@import "bootstrap";
@import "icons";

.beverages-container {
  @extend body;
  @extend .container-fluid;

  .beverage {
    padding: 12px;
    border-top: solid 1px $border-color;
    background-color: $white;
    &:hover {
      @each $bev-variant, $icon-map in $bev-variants {
        &.#{$bev-variant} {
          background-color: map-get($icon-map, hover-color);
        }
      }
    }

    .bev-icon-with-back {
      float: left;
      margin-top: -2px;
      margin-right: 5px;
    }

    .headers {
      @extend .col-xs-12;
      @extend .col-md-5;

      .name {
        @extend h4;
      }

      .brand {
        @extend h5;
        @extend .text-muted;
        display: none;
      }
    }

    .actions {
      text-align: right;
    }

    .more {
      @extend .col-xs-7;
      @extend .col-md-4;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .strength {
      @extend .col-xs-5;
      @extend .col-md-3;

      @extend .row;

      .moment, .theine-level {
        @extend .col-lg-6;
      }

      .moment {
        @extend .col-xs-12;
        text-align: right;

        ul {
          @extend .list-inline;
          margin-bottom: 0;

          > li {
            @extend .list-inline-item;
          }
        }
      }

      .theine-level {
        @extend .hidden-sm-down;

        progress {
          @extend .progress;

          &.unknown {
            @extend .progress-striped;
            @include progress-variant($text-muted);
            opacity: 0.25;
          }
          &.none, &.low {
            @include progress-variant($progress-bar-success-bg);
          }
          &.medium, &.high {
            @include progress-variant($progress-bar-warning-bg);
          }
          &.coffee {
            @include progress-variant($progress-bar-danger-bg);
          }
        }
      }
    }

    .preparation {
      text-align: center;

      @extend .col-xs-12;
      @extend .col-lg-2;

      @extend .row;
      .prep-info {
        @extend .col-xs-6;
        @extend .col-lg-12;
      }
    }

    &:not(.detailed) {
      .strength {
        .theine-level {
          @extend .hidden-md-down;
        }
      }

      .preparation {
        display: none;
      }

      p.note {
        display: none;
      }
    }

    &.detailed {
      .headers {
        .bev-icon-with-back {
          @extend .fa-2x;
        }

        .brand {
          display: initial;
        }
      }

      .more {
        @extend .col-md-3;
        white-space: inherit;
        overflow: inherit;

        .note-tip {
          display: none;
        }
      }

      .strength {
        @extend .col-lg-2;

        .moment, .theine-level {
          text-align: center;

          @extend .col-xs-6;
          @extend .col-sm-12;
        }
      }
    }
  }

  .filters {
    padding: 7px;

    > * {
      margin: {
        left: 5px;
        right: 5px;
      }
    }
  }

  //* Sliding animation */
  .slide {
    transition: 0.4s;

    &.up {
      overflow: hidden;
      max-height: 0;
      margin: {
        top: 0;
        bottom: 0;
      }
      padding: {
        top: 0;
        bottom: 0;
      }
      border: {
        top-width: 0;
        bottom-width: 0;
      }
    }
  }

  //* Utility classes */
  .btn-plain {
    @extend .btn-link;
    color: inherit;
    padding: 0;
  }

  .pull-right {
    float: right;
  }
}

{'fraction_non_alphanumeric': 0.1399450628885355, 'fraction_numerical': 0.014167991904004626, 'mean_word_length': 1.1598501404932875, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1324182', 'n_tokens_mistral': 2475, 'n_tokens_neox': 2329, 'n_words': 433}