App.scss

@import './scss/elevation-one.mixin';

.torus-app.v-application {
  @media (min-width: 1904px) {
    .container:not(.container--fluid) {
      max-width: 1400px;
    }
  }

  .v-tab {
    letter-spacing: 0;
  }

  .text-clamp-one {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-clamp-two {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-clamp-three {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  // Override
  .primary {
    background-color: var(--v-torusBrand1-base) !important;
    border-color: var(--v-torusBrand1-base) !important;
  }
  .primary--text {
    color: var(--v-torusBrand1-base) !important;
    caret-color: var(--v-torusBrand1-base) !important;
  }

  // Link
  a:focus-visible {
    color: var(--v-torusBrand2-base) !important;
    font-weight: bold !important;
    outline: none;
  }

  /* Header 1 48px*/
  .display-4 {
    font-weight: bold;
    font-size: 3rem !important;
    line-height: 3.5rem;
    letter-spacing: 0;
  }
  /* Header 2 40px*/
  .display-3 {
    font-weight: bold;
    font-size: 2.5rem !important;
    line-height: 3rem;
    letter-spacing: 0;
  }
  /* Header 3 32px*/
  .display-2 {
    font-weight: bold;
    font-size: 2rem !important;
    line-height: 2.375rem;
    letter-spacing: 0;
  }
  /* Header 4 24px*/
  .display-1 {
    font-weight: bold;
    font-size: 1.5rem !important;
    line-height: 1.75rem;
    letter-spacing: 0;
  }
  /* Header 5 18px*/
  .headline {
    font-weight: bold;
    font-size: 1.125rem !important;
    line-height: 1.3rem;
    letter-spacing: 0;
  }
  /* Header 6 16px*/
  .title {
    font-weight: bold;
    font-size: 1rem !important;
    line-height: 1.2rem;
    letter-spacing: 0;
  }

  .label {
    font-size: 0.75rem;
    line-height: 0.875rem;
    letter-spacing: 0;
    font-weight: normal;
  }

  .body-link {
    color: var(--v-torusBrand1-base);
  }

  /* Header 6 12px*/
  .description {
    font-size: 0.75rem;
    line-height: 0.875rem;
    letter-spacing: 0;
    font-weight: normal;
  }

  /* Header 6 12px*/
  .caption {
    font-size: 0.75rem !important;
    line-height: 0.875rem;
    letter-spacing: 0 !important;
    font-weight: normal;
  }

  /* Header 6 11px*/
  .caption-2 {
    font-size: 0.7rem;
    line-height: 0.75rem;
    letter-spacing: 0;
    font-weight: normal;
    color: var(--v-torusGray3-base);
  }

  /* Header 6 10px*/
  .caption-3 {
    font-size: 0.625rem;
    line-height: 0.65rem;
    letter-spacing: 0;
  }

  .v-menu__content {
    background: #ffffff;
    border: 1px solid #f5f5f5;
    box-shadow: 0px 14px 28px rgba(46, 91, 255, 0.06);
    border-radius: 9px;
    &.theme--dark {
      border: 0;
      background: none;
      box-shadow: 5px 5px 10px #212121, -5px -5px 10px rgba(55, 56, 60, 0.25);
    }
  }

  .elevation-1 {
    @include elevationOne();
  }

  .elevation-2 {
    border: 1px solid #f5f5f5;
    box-shadow: 0px 14px 28px rgba(46, 91, 255, 0.06), 0px 14px 28px rgba(46, 91, 255, 0.12) !important;
    border-radius: 6px;
  }

  .elevation-3 {
    border: 1px solid rgba(206, 208, 214, 0.3);
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(222, 229, 255, 0.5), -5px -5px 10px #fafbff !important;
    border-radius: 6px;
  }

  // FORMS

  .v-input {
    .v-input__slot {
      margin-bottom: 2px;
    }
    &.v-input--is-disabled:not(.error--text) > .v-input__control {
      & > .v-input__slot {
        background: #f1f2f6;
      }
    }
    &.v-input--is-readonly .v-input__slot {
      background: #f1f2f6;
    }
    &.v-text-field--outlined:not(.v-input--is-disabled) > .v-input__control {
      padding-top: 0;
      margin-top: 0;
      & > .v-input__slot {
        background: #ffffff;
        box-shadow: inset 0px 4px 28px rgba(46, 91, 255, 0.06);
        border-radius: 6px;
        min-height: 54px;
      }
      .v-input__icon--append .v-icon {
        color: #d3d5e2;
      }
    }
    &.v-text-field--outlined:not(.error--text) {
      fieldset {
        border: 1px solid #d3d5e2;
      }
    }
    &.v-text-field--outlined.error--text {
      fieldset {
        border: 1px solid var(--v-error-base);
      }
    }
    &.v-input.v-input--dense > .v-input__control > .v-input__slot {
      min-height: inherit;
    }
    .v-input__icon--append .v-icon {
      -webkit-appearance: none;
    }
    .v-text-field__details {
      padding: 0;
    }
    &.v-text-field--outlined.v-input--is-focused:not(.error--text) {
      fieldset {
        border: 1px solid var(--v-torusFont1-base);
      }
    }
  }

  .v-btn:not(.v-btn--text):not(.v-btn--icon) {
    box-shadow: 0px 0px 2px rgba(51, 65, 80, 0.03), 0px 2px 2px rgba(51, 65, 80, 0.03);
    &:not(.v-btn--round) {
      border-radius: 6px;
    }
  }

  .v-btn.v-btn--text {
    &:focus {
      color: var(--v-torusBrand2-base) !important;
      font-weight: bold !important;
      &::before {
        opacity: 0;
      }
    }
  }

  .v-btn {
    text-transform: inherit;
    letter-spacing: normal;
  }

  &.theme--light {
    .body-2 {
      color: var(--v-torus_1-base);
    }
    .theme--light.v-btn.torus-btn1 {
      @extend .elevation-3;
      &.v-btn--fab {
        border-radius: 50%;
      }
      background: #ffffff;
      border: 1px solid rgba(206, 208, 214, 0.3);
    }
  }

  .v-btn {
    text-transform: inherit;
  }

  &.theme--dark {
    background: var(--v-torusBlack-base);
    &.v-sheet {
      background: var(--v-torusBlack2-base);
    }
    .v-app-bar.v-toolbar.v-sheet {
      background: var(--v-torusBlack2-base);
    }
    .v-card {
      background-color: var(--v-torusBlack2-base);
    }
    .v-list {
      background-color: var(--v-torusBlack2-base);
    }
    .v-expansion-panel {
      background-color: var(--v-torusBlack2-base);
    }

    .elevation-1,
    .elevation-2,
    .elevation-3 {
      border: 0;
    }

    .elevation-1 {
      box-shadow: 0px 14px 28px rgba(36, 37, 41, 0.5) !important;
    }

    .elevation-3 {
      box-shadow: 5px 5px 10px #242529, -5px -5px 10px #37383c !important;
    }

    .v-input {
      &.v-text-field--outlined > .v-input__control {
        & > .v-input__slot {
          background: var(--v-torusBlack-base);
          box-shadow: inherit;
        }
        fieldset {
          border: 1px solid var(--v-torusGray3-base);
        }
        .v-icon {
          color: var(--v-text_2-base);
        }
        input {
          color: var(--v-text_2-base);
        }
      }
    }

    .theme--dark.v-btn.torus-btn1 {
      @extend .elevation-3;
      &.v-btn--fab {
        border-radius: 50%;
      }
      background-color: var(--v-torusBlack2-base);
    }
  }
}

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  .bottom-text {
    position: absolute;
    bottom: 3rem;
    padding: 0 1rem;
  }
}