@import '../style/var.less';

@square-item-icon-width: 35px;
@square-item-icon-height: 35px;

.zt-squared {
  padding: 0 @padding-base;
  > .zt-squared--item {
    padding: @padding-base 0;
    // margin: 0 @margin-base;
    > .zt-squared--item__icon {
      text-align: center;
      width: @square-item-icon-width;
      height: @square-item-icon-height;
      line-height: @square-item-icon-height;
      border-radius: 10px;
      // background-color: @system;
      font-size: @square-item-icon-height;
      color: @primary-1;
      margin: 0 auto;
    }
    > .zt-squared--item__title {
      padding: 4px 0;
      line-height: 20px;
      text-align: center;
      font-size: @g3-font-size;
    }
  }
  &.zt-squared--shadow {
    > .zt-squared--item {
      cursor: pointer;
      > .zt-squared--item__icon {
        background: linear-gradient(135deg, #f1f1f1, #ffffff);
        box-shadow: 5px 5px 9px #dbdbdb, -5px -5px 9px #ffffff;
      }
      &:active > .zt-squared--item__icon {
        box-shadow: none;
        background: linear-gradient(
          135deg,
          #cccccc 0%,
          #f1f1f1 48%,
          #fdfdfd 100%
        );
      }
      > .zt-squared--item__title {
        color: #666;
      }
    }
  }
}