alxshelepenok/gatsby-starter-lumen

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

.sidebar {
  width: 100%;

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

    &:after {
      background: var(--color-sidebar-border);
      background: linear-gradient(
          to bottom,
          var(--color-sidebar-border) 0%,
          var(--color-sidebar-border) 48%,
          var(--color-sidebar-border-fade) 100%
      );
    }
  }
}

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

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

      &:after {
        bottom: 0;
        content: "";
        height: 540px;
        position: absolute;
        right: -10px;
        top: 30px;
        width: 1px;
      }
    }
  }
}

@include breakpoint-md {
  .sidebar {
    lost-column: 1/3;

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