@import "compass/css3";

.trip-block.minimalism {
  padding: 0;
  background: #ffffff;
  min-width: 400px; // TODO remove this later
  max-width: 90vw;
  max-height: 90vh;
  @include box-shadow(0 2px 7px 2px rgba(0, 0, 0, 0.5));
  @include border-radius(8px);
  @include trip-arrow-color(#ffffff);

  .trip-content {
    padding: 5px;
  }

  .trip-header {
    padding: 10px;
  }

  h1 {
    font-size: 25px;
    color: #1e2224;
    margin-bottom: 10px;
    font-weight: bold;
  }

  p {
    line-height: 160%;
    font-size: 12px;
    color: #bebebe;
  }

  .trip-progress-steps {
    border: 1px solid #212527;
    border-width: 1px 0;

    .trip-progress-step {
      background: #1e2224;

      &.selected {
        background: none;
      }
    }
  }

  .trip-navigation {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .trip-prev,
  .trip-next,
  .trip-skip {
    font-size: 12px;
    text-decoration: none;
    color: #bebebe;
  }

  .trip-prev,
  .trip-next {
    &.disabled {
      color: #bebebe;
    }

    padding: 18px 36px;
    margin: 10px;
    max-width: 150px;
  }

  .trip-prev {

  }

  .trip-next {
    background: #383f43;
    @include border-radius(3px);
  }

  .trip-skip {
    display: block;
    border-top: 1px solid #bebebe;
    padding: 15px;
    flex-basis: 100%;
  }
}
