@import "./var";
@import "./utils.less";
@directions: left,right,top,left;

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: @base-font-family;
}

a {
  text-decoration: none;
}

input,
button,
textarea {
  color: inherit;
  font: inherit;
}

a,
input,
button,
textarea {
  &:focus {
    outline: none;
  }
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

// 基本样式
.yh-clearfix {
  &::after {
    display: table;
    clear: both;
    content: "";
  }
}


.yh-config-dark {
  background-color:black;
} 

// color
.yh-color-body {
  color: @color-body;
}
.yh-color-text {
  color: @color-text;
}

.yh-color-primary {
  color: @color-primary;
}

.yh-color-info {
  color: @color-info;
}
.yh-color-success {
  color: @color-success;
}
.yh-color-warning {
  color: @color-warning;
}
.yh-color-danger {
  color: @color-danger;
}
.yh-color-text-disabled {
  color: @color-text-disabled;
}

// border
.yh-border-color {
  border-color: @color-border;
}
.yh-border {
  .multi-border(@color-border);
}

each(@directions,{
  .yh-border-@{value} {
    .multi-border-direction(@color-border,@value);
  } 
})


.yh-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yh-ellipsis-2 {
  .multi-ellipsis(2);

} 
.yh-ellipsis-3 {
  .multi-ellipsis(3);

}

// 异型屏 顶部安全区适配
.yh-safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
// 异型屏 底部安全区适配
.yh-safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
// <meta
//   name="viewport"
//   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
// />


/*基础动画*/

:root {
  --animation-duration-base:@animation-duration-base;
  --animation-timing-function-enter: @animation-timing-function-enter;
  --animation-timing-function-leave:@animation-timing-function-leave;
} 
@keyframes yh-fade-in {
  from {
    opacity: 0;
  } 
  to {
    opacity: 1;
  } 
} 

@keyframes yh-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  } 
}
//淡入淡出
.yh-fade {
  //进程动画
  &-enter-active {
    animation: yh-fade-in var(--animation-duration-base)   both var(--animation-timing-function-enter);
  }
  &-leave-active {
    animation: yh-fade-out var(--animation-duration-base)  both var(--animation-timing-function-leave);

  }  
}