@import './../theme/config.scss';
@import './../mixins/gridmixin.scss';

$amos-prefix: $vender-prefix;

// Grid system
.#{$amos-prefix}-row {
  @include make-row();

  display: block;
  box-sizing: border-box;
}

.#{$amos-prefix}-row-flex {
  display: flex;
  flex-flow: row wrap;

  &::before,
  &::after {
    display: flex;
  }
}

// x轴原点
.#{$amos-prefix}-row-flex-start {
  justify-content: flex-start;
}

// x轴居中
.#{$amos-prefix}-row-flex-center {
  justify-content: center;
}

// x轴反方向
.#{$amos-prefix}-row-flex-end {
  justify-content: flex-end;
}

// x轴平分
.#{$amos-prefix}-row-flex-space-between {
  justify-content: space-between;
}

// x轴有间隔地平分
.#{$amos-prefix}-row-flex-space-around {
  justify-content: space-around;
}

// 顶部对齐
.#{$amos-prefix}-row-flex-top {
  align-items: flex-start;
}

// 居中对齐
.#{$amos-prefix}-row-flex-middle {
  align-items: center;
}

// 底部对齐
.#{$amos-prefix}-row-flex-bottom {
  align-items: flex-end;
}

.#{$amos-prefix}-col {
  position: relative;
}

@include make-grid-columns();
@include make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(-sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-grid(-md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-grid(-lg);
}

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(-xl);
}

// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: $screen-xxl-min) {
  @include make-grid(-xxl);
}


// grid plate
.#{$amos-prefix}-grid-plate {
  display: inline-flex;
  flex-direction: column;
  width: 150px;
  height: 68px;

  &-pane {
    flex: 1;
    background: #d8d8d8;
    border-radius: $border-radius-base;
  }

  &-row {
    display: flex;
    align-items: center;

    li {
      display: flex;
      flex: 1;
      justify-content: center;
    }
  }

  &-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 3px;
    background: white;
    border-radius: 50%;
  }

  &-tip {
    text-align: center;
  }
}