
// @optional core/multiple/multiple.scss
// @require core/widget/widget.scss

/* RAILS */

.rails {

  @extend %widget;
  overflow: hidden;
  display: flex;

  /* CHILDREN */

  > * {
    margin-bottom: 0;
  }

  /* JOINED - BORDER RADIUS */

  > :not(:last-child),
  > .multiple:not(:last-child) > :last-child {
    @include border-right-radius ( 0 );
  }

  > :not(:first-child),
  > .multiple:not(:first-child) > :first-child {
    @include border-left-radius ( 0 );
  }

  /* JOINED - BORDER WIDTH */

  > :not(:last-child):not(.rails-start):not(.rails-left),
  > .multiple:not(:last-child) > :last-child {
    border-right-width: 0;
  }

  .rails-start,
  .rails-left {

    + *,
    + .multiple > :first-child {
      border-left-width: 0;
    }

  }

  /* NAVIGATION */

  > .rails-start,
  > .rails-left,
  > .rails-right,
  > .rails-end {
    flex-shrink: 0;
  }

  /* SHADOW */

  &-shadow {

    position: relative;
    overflow: hidden;
    flex-grow: 1;

    /* LEFT & RIGHT */

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      pointer-events: none;
      width: $rails-shadow-width;
      opacity: 0;
      transition: opacity $rails-animation-duration;
    }

    &-left:before,
    &-right:after {
      opacity: 1;
    }

    /* LEFT */

    &:before {
      @include gradient-x( $rails-shadow-color, transparent );
      left: 0;
    }

    /* RIGHT */

    &:after {
      @include gradient-x( transparent, $rails-shadow-color );
      right: 0;
    }

  }

  /* CONTENT */

  &-content {

    flex: 1 1 auto;
    overflow-x: hidden; /* In order to avoid displaying any scrollbars, even while loading */
    overflow-y: hidden;

    /* READY */

    html[class*="scrollbar-size-"] & {
      padding-bottom: $rails-extra-padding;
    }

    /* CHILDREN */

    > * {
      flex: 1 0 auto;
    }

  }

}

/* SCROLLBAR */

@each $size in $rails-scrollbar-sizes {

  @if unitless( $size ) {

    $size: $size * 1px;

  }

  html.scrollbar-size-#{unit-strip( $size )} {

    .rails {

      .rails-content {

        overflow-x: scroll;
        margin-bottom: calc( ( #{$rails-extra-padding} + #{$size} ) * -1 );

        &:not(.multiple) {
          padding-bottom: calc( #{$rails-extra-padding} + #{$size} );
        }

        &.multiple {
          margin-bottom: calc( ( #{$rails-extra-padding} + #{$size} + #{$gutter} ) * -1 );
        }

      }

    }

  }

}
