@import 'reset.scss';
@import 'var.scss';
@import 'mixins.scss';
@import 'iconfont.scss';
@import 'icon.scss';
html,
body,
#app {
  height: 100%;
}

html {
  font-size: 37.5px;
  font-size: 10vw;
}

body {
  font-family: $font-family;
  background-color: $background-color;
}
button {
  border: 0;
}
button:focus {
  outline: 0;
}
.tel {
  color: #5371e0;
  font-size: 12px;
}
.page {
  background-size: contain;
  background-color: $background-color;
  height: 100%;
  padding: 0 $page-padding;
  &__ios-fix-bottom {
    &::after {
      content: '';
      display: block;
      padding-bottom: $ios-bottom-height;
    }
  }
  &__nopad {
    padding: 0;
  }
}

a {
  color: $red;
  @include text-size(14);
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: $gray-3;
}
input,
textarea {
  outline: none !important;
}
input {
  -webkit-appearance: none;
}
strong {
  font-weight: $font-weight-bold;
}
.cr-nav-bar {
  &__title {
    font-weight: 400 !important;
  }
  &__left {
    color: $gray-4 !important;
  }
}
.cr-cell-group::after,
.cr-cell-group_content::after {
  display: none !important;
}
.cr-picker {
  &--toolbar {
    &-title {
      font-size: 16px;
      color: #333;
    }
    &-cancel {
      color: #999999 !important;
    }
    &-confirm {
      color: $red !important;
    }
    &::after {
      display: none;
    }
  }
}
.has-header {
  .app {
    height: calc(100% - $nav-bar-height);
    min-height: calc(100% - $nav-bar-height);
  }
}
.has-tab-bar {
  .app {
    height: calc(100% - $tab-bar-height - constant(safe-area-inset-bottom));
    height: calc(100% - $tab-bar-height - env(safe-area-inset-bottom));
    min-height: calc(100% - $tab-bar-height - constant(safe-area-inset-bottom));
    min-height: calc(100% - $tab-bar-height - env(safe-area-inset-bottom));
  }
}
.cr-dialog--confirm,
.cr-dialog--confirm:active {
  color: $red;
}
.cr-cell:last-child::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  bottom: 0;
  left: 0.426667rem;
  right: 0;
  border-bottom: 0.026667rem solid #f2f3f5;
  transform: scaleY(0.5);
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-dialog--header {
  padding: $padding-xl;
  &--isolated {
    padding-bottom: 0;
  }
}
.cr-dialog-invoice {
  .cr-dialog--header > div {
    color: $black;
    font-weight: bold;
  }
  .cr-dialog--close {
    top: 12px;
    right: 12px;
    z-index: 1;
    .cr-icon {
      color: #c8c9cc;
    }
  }
  .cr-dialog--message {
    color: $black;
  }
  .cr-button::before,
  .cr-button::after {
    border-color: #ebedf0;
  }
  .cr-hairline--top::after {
    border-color: #ebedf0;
  }
}
.cr-toast {
  left: 0;
  max-width: 85vw;
  right: 0;
  margin: auto;
}
