@import "var";

.@{prefixName}-col {
  box-sizing: border-box;
  flex: 1;
  display: flex;
}

:host(.flex-none) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
:host(.col-first) {
  order: -1;
}
:host(.col-last) {
  order: 1;
}

/*
 * 小程序不支持此选择器
 * 目的：为插入到slot中的选择器，设置默认样式
 * 此处为了实现所有列等高，tea-col设置为flex，所以插入的内容必须要声明flex:1属性

::slotted(view) {
  background: pink;
  flex: 1;
} */

:host {
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  max-width: 100%;
  display: flex;
}

:host(.start) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  align-items: center;
}
:host(.center) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;

  align-items: center;
}
:host(.end) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;

  align-items: center;
}

/* cols */
:host(.col-1),
:host(.col-2),
:host(.col-3),
:host(.col-4),
:host(.col-5),
:host(.col-6),
:host(.col-7),
:host(.col-8),
:host(.col-9),
:host(.col-10),
:host(.col-11),
:host(.col-12) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

:host(.col-1) {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

:host(.col-2) {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

:host(.col-3) {
  flex-basis: 25%;
  max-width: 25%;
}

:host(.col-4) {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

:host(.col-5) {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

:host(.col-6) {
  flex-basis: 50%;
  max-width: 50%;
}

:host(.col-7) {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

:host(.col-8) {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

:host(.col-9) {
  flex-basis: 75%;
  max-width: 75%;
}

:host(.col-10) {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

:host(.col-11) {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

:host(.col-12) {
  flex-basis: 100%;
  max-width: 100%;
}

/* Offsets */
:host(.col-offset-1) {
  margin-left: 8.33333333%;
}

:host(.col-offset-2) {
  margin-left: 16.66666667%;
}

:host(.col-offset-3) {
  margin-left: 25%;
}

:host(.col-offset-4) {
  margin-left: 33.33333333%;
}

:host(.col-offset-5) {
  margin-left: 41.66666667%;
}

:host(.col-offset-6) {
  margin-left: 50%;
}

:host(.col-offset-7) {
  margin-left: 58.33333333%;
}

:host(.col-offset-8) {
  margin-left: 66.66666667%;
}

:host(.col-offset-9) {
  margin-left: 75%;
}

:host(.col-offset-10) {
  margin-left: 83.33333333%;
}

:host(.col-offset-11) {
  margin-left: 91.66666667%;
}

/* align */
.@{prefixName}-align-self-stretch {
  align-self: stretch;
}
.@{prefixName}-align-self-flex-start {
  align-self: flex-start;
}
.@{prefixName}-align-self-flex-end {
  align-self: flex-end;
}
.@{prefixName}-align-self-center {
  align-self: center;
}
.@{prefixName}-align-self-baseline {
  align-self: baseline;
}