@import "reset.less";
@import "var.less";
@import "mixins.less";

html,
body,
#app {
  height: 100%;
}

body {
  font-family: @font-family;
  background-color: @background-color;
}

a {
  color: @blue;
  font-size: @font-size-12;
}

input::-webkit-input-placeholder {
  color: #AAAAAA;
}

.cr-button {
  padding: 0 @padding-sm  !important;

  &__text {
    font-weight: bold !important;
  }

  &--warning {
    color: @button-warning-color  !important;
    background-color: @button-warning-background-color  !important;
    border: 1px solid @button-warning-border-color  !important;
    border-radius: @border-radius-md  !important;
  }

  &--default {
    color: @button-default-color  !important;
    background-color: @button-default-background-color  !important;
    border: 1px solid @button-default-border-color  !important;
    border-radius: @border-radius-md  !important;
  }

  &--large {
    height: @button-large-height  !important;
    line-height: @button-large-line-height  !important;
  }

  &--small {
    height: @button-small-height  !important;
    line-height: @button-small-line-height  !important;
  }
}

.cr-tag {
  border-radius: 8px 2px 8px 2px !important;
  background-color: @tag-default-background-color  !important;
  color: @tag-default-color  !important;
  padding: 1px 6px 2px !important;
  font-size: 10px !important;
  font-weight: bold;

  &--round {
    border-radius: 1em !important;
  }
  &--primary {
    background-color: @tag-primary-background-color !important;
    color: @tag-primary-color !important;
  }

  &--success {
    background-color: @tag-success-background-color !important;
    color: @tag-success-color !important;
  }

  &--danger {
    background-color: @tag-danger-background-color !important;
    color: @tag-danger-color !important;
  }

  &--warning {
    background-color: @tag-warning-background-color !important;
    color: @tag-warning-color !important;
  }
  &--plain {
    background-color: @tag-default-light-background-color !important;
    color: @tag-default-light-color !important;
    &::after {
      display: none;
    }
    &.cr-tag--primary {
      background-color: @tag-primary-light-background-color !important;
      color: @tag-primary-light-color !important;
    }
    &.cr-tag--success {
      background-color: @tag-success-light-background-color !important;
      color: @tag-success-light-color !important;
    }
    &.cr-tag--danger {
      background-color: @tag-danger-light-background-color !important;
      color: @tag-danger-light-color !important;
    }
    &.cr-tag--warning {
      background-color: @tag-warning-light-background-color !important;
      color: @tag-warning-light-color !important;
    }
  }
}

.cr-notify {
  font-size: @font-size-14;
}

.cr-field--error-message {
  display: none;
}

.cr-picker {
  font-size: 14px;
}

.table {
  margin: 0;
  width: 100%;

  thead {
    th {
      color: @gray-5;
      font-size: @font-size-12;
      font-weight: @font-weight-bold;
      padding: 12px 0 12px 18px;
      text-align: left;
      background-color: @gray-1;

      &:first-child {
        border-top-left-radius: @border-radius-lg;
        border-bottom-left-radius: @border-radius-lg;
      }

      &:last-child {
        border-top-right-radius: @border-radius-lg;
        border-bottom-right-radius: @border-radius-lg;
      }
    }
  }

  tbody {
    th {
      color: @black;
      font-size: @font-size-12;
      font-weight: @font-weight-bold;
      padding: 12px 9px 12px 18px;
      text-align: left;
      border-bottom: 1px solid #ece9e9;
    }

    td {
      color: @black;
      font-size: @font-size-12;
      padding: @padding-sm + 2 @padding-md + 2;
      border-bottom: 1px solid #ece9e9;
      text-align: left;
    }
  }
}

.searching {
  animation: search-move 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes search-move {
  0% {
    transform: translate(49.369px, 66.02px) rotate(-45deg);
  }

  25% {
    transform: translate(39.369px, 66.02px) rotate(-45deg);
  }

  50% {
    transform: translate(39.369px, 76.02px) rotate(-45deg);
  }

  75% {
    transform: translate(49.369px, 76.02px) rotate(-45deg);
  }

  100% {
    transform: translate(49.369px, 66.02px) rotate(-45deg);
  }
}

@-webkit-keyframes free_download {
  0% {
    -webkit-transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes free_download {
  0% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}