@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";

.sidebar {
  width: 100%;

  .inner {
    @include padding(1, 0.75, 0);
    position: relative;
  }
}

@include breakpoint-sm {
  .sidebar {
    lost-column: 5/12;

    .inner {
      @include padding(1.25, 0.75, 0);

      &:after {
        background: $color-gray-border;
        background: linear-gradient(
          to bottom,
          $color-gray-border 0%,
          $color-gray-border 48%,
          $color-white 100%
        );
        bottom: 0;
        content: "";
        height: 540px;
        position: absolute;
        right: -10px;
        top: 30px;
        width: 1px;
      }
    }
  }
}

@include breakpoint-md {
  .sidebar {
    lost-column: 1/4;
    // TODO: column to 1/4?
    // lost-column: 1/3;?

    .inner {
      @include padding-equal(1.5);
    }
  }
}