.gem-c-reorderable-list {
  @include govuk-font(19, bold);

  list-style-type: none;
  margin-bottom: govuk-spacing(6);
  margin-top: 0;
  padding-left: 0;
  position: relative;

  .govuk-form-group {
    margin-bottom: 0;
  }
}

.gem-c-reorderable-list__item {
  margin-bottom: govuk-spacing(3);
  border: 1px solid $govuk-border-colour;
  padding: govuk-spacing(3);
}

.gem-c-reorderable-list__item--chosen {
  background-color: govuk-colour("light-grey");
  outline: 2px dotted $govuk-border-colour;
}

.gem-c-reorderable-list__item--drag {
  background-color: govuk-colour("white");
  list-style-type: none;

  .gem-c-reorderable-list__actions {
    visibility: hidden;
  }
}

.gem-c-reorderable-list__wrapper {
  display: block;

  @include govuk-media-query($from: desktop) {
    display: inline-flex;
    width: 100%;
  }
}

.gem-c-reorderable-list__content {
  margin-bottom: govuk-spacing(2);
  @include govuk-media-query($from: desktop) {
    margin-bottom: 0;
    flex: 0 1 auto;
    min-width: 65%;
  }
}

.gem-c-reorderable-list__title {
  margin: 0;
}

.gem-c-reorderable-list__description {
  @include govuk-font(16, regular);
  margin: 0;
}

.gem-c-reorderable-list__actions {
  display: block;

  @include govuk-media-query($from: desktop) {
    flex: 1 0 auto;
    text-align: right;
  }

  .gem-c-button {
    display: none;
  }
}

.js-enabled {
  .gem-c-reorderable-list__item {
    @include govuk-media-query($from: desktop) {
      cursor: move;
    }
  }

  .gem-c-reorderable-list__actions .govuk-form-group {
    display: none;
  }

  .gem-c-reorderable-list__actions .gem-c-button {
    display: inline-block;
    margin-left: govuk-spacing(3);
    width: 80px;
  }

  .gem-c-reorderable-list__actions .gem-c-button:first-of-type {
    margin-left: 0;

    @include govuk-media-query($from: desktop) {
      margin-left: govuk-spacing(3);
    }
  }

  .gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
  .gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
    display: none;

    @include govuk-media-query($from: desktop) {
      display: inline-block;
      visibility: hidden;
    }
  }

  .gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
    margin-left: 0;

    @include govuk-media-query($from: desktop) {
      margin-left: govuk-spacing(3);
    }
  }
}