//Custom Variables (outside Bootstrap's scope)
body {
    background-color: #F7F9FB;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
// to fill svgs, eg. circle in status component
.fill- {
    &primary {
        fill: $primary;
    }
    &success {
        fill: $green;
    }
    &warning {
        fill: $yellow;
    }
    &danger {
        fill: $red;
    }
    &muted {
        fill: #6c757d;
    }
    &default {
        fill: #6c757d;
    }
}
// .vh100 {
//     min-height: 100vh;
//     min-height: -webkit-fill-available;
//     min-height: -moz-available;
//     min-height: available; // not sure if exist in any browser
//     min-height: -webkit-stretch; // not sure if exist in any browser
//     min-height: -moz-stretch; // not sure if exist in any browser
//     min-height: stretch;
// }

.min-vh100 {
    min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    min-height: var(--vh100, 100vh);
}

// Overrides
a {
    outline: 0 !important; 
}

.btn, button {
    outline: 0 !important;
    border: none !important;
    text-transform: uppercase;
    box-shadow: none !important;
    &.btn-danger,&.btn-warning {
        color: #fff;
    }
    &.btn-outline-danger {
        &:hover,&:active {
            color: #fff !important;
        }
    }
    
}

.cursor-wait {
    cursor: wait;
}

.progress-bar {
    border-radius: 4px;
}

.bg-orange {
  background: #ff9226;
}

.card {
    background: #ffffff;
    box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
    border-radius: 1rem;
    &:hover {
        box-shadow: 0px 10px 40px rgba(209, 213, 223, 0.6);
    }
    border: none !important;
    outline: 0 !important;
    // Loading bar safari bug https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.neu-input {
    background: linear-gradient(346.78deg, #f7fcfc 0%, #fafcfa 100%);
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.3s ease;
    &:focus {
        border: 1px solid rgba(0, 0, 0, 0.02);
        box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.2);
    }
    &:disabled {
        color: rgba(0, 0, 0, 0.5);
        cursor: not-allowed;
    }
}

.neu-input-group {
    .neu-input {
        padding-right: 2rem;
        border-radius: 0.3rem !important;
    }
    .input-group-append {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        // border: 2px solid rgba(0, 0, 0, 0.02);
        border-top-right-radius: 0.3rem;
        border-bottom-right-radius: 0.3rem;
        z-index: 3;
        // background: rgb(255,255,255);
        // background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9346113445378151) 22%, rgba(255,255,255,1) 100%);
        height: 100%;
        padding-left: 0.5rem;
        padding-right:0.5rem;
    }
    .input-group-append > .btn {
        background: none !important;
        color: #616877;
        border: none !important;    
        outline: none !important;
        box-shadow: none !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.5rem;
    }
}
  

.dropdown-menu {
    background: #ffffff;
    box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.8);
    border-radius: 1rem;
    padding: 1rem 0;
    border: none !important;
}
.dropdown-item, .dropdown-group {
    padding: 0.6rem 2rem;
}

.card-input {
    position: relative;
    background: #ffffff;
    box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
    -webkit-appearance: none; //iOS messes up forms - See: https://stackoverflow.com/questions/10757146/iphone-ios-will-not-display-box-shadow-properly
    border-radius: 1rem;
    height: calc(2.25em + 1.125rem + 2px);
    padding: 0.5rem 1.5rem;
    outline: 0 !important;
    border: none !important;

    &:hover,
    &:focus,
    &:active {
      box-shadow: 0px 10px 40px rgba(209, 213, 223, 0.6);
    }
}

.card-input-group {
    .card-input {
        padding-right: 3rem;
    }
    .input-group-append > .btn {
        background: none !important;
        color: #616877;
        border: none !important;    
        outline: none !important;
        box-shadow: none !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.5rem;
    }
}

.card-list {
    max-height: 15rem;
    overflow-y: scroll;
}


#confetti-canvas {
    z-index: 99999;
}

.card-custom {
    overflow-x: hidden;
    position: relative;
}
.card-custom-loading-bar {
    position: absolute;
    top: 0;
    height: 4px;
    background-color: #c3c6d1;
    display: block;
    border-radius: 1px;
    width: 100%;
    animation: card-custom-loading-bar-animation ease-in-out infinite 2s;
}

@keyframes card-custom-loading-bar-animation {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(100% ,0, 0);
    }
    75% {
        transform: translate3d(-100% ,0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
  }

  //Loading placeholders

  .loading-placeholder {
      display: inline-block;
      height: 1rem;
      width: 100%;
      background-color: #EDEEF1;
      border-radius: 0.5rem;
      animation: loading-placeholder 1.5s infinite ease;
      &.loading-placeholder-sm {
          height: 0.75rem;
          border-radius: 0.375rem;
      }
      &.loading-placeholder-lg {
        height: 1.25rem;
        border-radius: 0.625rem;
    }
  }
  
  @keyframes loading-placeholder {
    0%,
    100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }

  // toasts

  .b-toast {
    .toast {
        outline: none !important;
        .toast-header {
            color: rgba(0,0,0,0.5);
            .close {
                text-shadow: none;
                opacity: 0.3;
            }
        }
        .toast-body {
            padding-top: 0;
        }
    }

    &.b-toast-success {
        .toast {
            .toast-header {
                color: #fff;
                background: $green;
            }
            .toast-body {
                color: #fff;
                background: $green;
            }
        }
    }
    &.b-toast-warning {
        .toast {
            .toast-header {
                color: #fff;
                background: $yellow;
            }
            .toast-body {
                color: #fff;
                background: $yellow;
            }
        }
    }
    &.b-toast-danger {
        .toast {
            .toast-header {
                color: #fff;
                background: $red;
            }
            .toast-body {
                color: #fff;
                background: $red;
            }
        }
    }
  }

  
//clock pending animating icon
svg.icon-clock {
    height: 15px;
    width: 15px;
    fill: none;
    stroke: #6c757d;
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(-90deg);
    --start-seconds: 57;
    --start-minutes: 45;
    --start-hours: 11;

    &.icon-clock-warning {
        stroke: #8a6c10;
    }

    circle {
      fill: none;
    }
  
    .seconds,
    .minute,
    .hour {
      transform: translate(20px, 20px) rotate(0deg);
    }
  
    .minute {
      transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
      stroke-width: 3;
      animation: rotateMinuteHand 10s linear infinite;
    }
  
    .hour {
      transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
      animation: rotateHourHand 60s linear infinite;
      stroke-width: 3;
    }
}
  @keyframes rotateMinuteHand {
    from {
      transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));
    }
    to {
      transform: translate(20px, 20px)
        rotate(calc(var(--start-minutes) * 6deg + 360deg));
    }
  }
  
  @keyframes rotateHourHand {
    from {
      transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));
    }
    to {
      transform: translate(20px, 20px)
        rotate(calc(var(--start-hours) * 30deg + 360deg));
    }
  }


  //wallet 
  .wallet-content {
    height: 22rem;
  }
  .wallet-buttons {
      height: 3.5rem;
  }
  .wallet-error {
      position: relative;
      height: 1rem;
      .error {
          position: absolute;
          top: 0;
          left: 0;
      }
  }
  //transactions container
  //Transactions
.wallet-transactions-container {
    position: relative;

    .transactions {
        height: 22rem;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch; //momentum scroll on iOS
      }
  
    //bottom fade
    &:before {
      //nice faded white so the discarded blocks don't abruptly cut off
      content: "";
      position: absolute;
      height: 2rem;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: 2;
      background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1)
      );
    }
  
    //top fade
    &:after {
      //nice faded white so the discarded blocks don't abruptly cut off
      content: "";
      position: absolute;
      height: 2rem;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 2;
      background-image: linear-gradient(
        to top,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1)
      );
    }
  }
  
  
  .zero-wallet-transactions-container {
    height: 20rem;
  }

  .tooltip {
    .tooltip-inner {
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.18);
    }
  }

  //increase max-width from 500px to 600px primarily to fit the seed in view seed modal on smaller screens
  @media (min-width: 456px) {
    #seed-modal {
        .modal-dialog {
            max-width: 600px;
            margin: 1.75rem auto;
        }
    }
  }


// blur background content on modal open
.modal-backdrop {
    opacity: 0.3;
}
body {
    #app {
        transition: filter 0.2s ease;
    }
    &.modal-open {
        overflow: hidden !important;
        #app {
            filter: blur(2px);
        }
    }
    
}

// Helper class to support text with "\n" newline characters
.text-newlines {
    white-space: pre-line; 
}

.connect-wallet-steps {
    .connect-wallet-step {
        margin-bottom: 1.2rem;
    }   
}
.connect-wallet-substeps {
    list-style-type: lower-roman;
    padding: 0 0 0 20px;
    .connect-wallet-substep {
        margin-bottom: 1.2rem;
    }
}

// Helper class to truncate text with "..."
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

// Helper class for fade in and out animation
.fade-in-out {
    animation: fadeInOut 1s infinite linear;
}

@keyframes fadeInOut {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
}

.app-icon {
  height: 100px;
  width: 100px;
  border-radius: 20px;
  border: solid 1px #e1e6ea;
  object-fit: contain;
  align-items: flex-start;
}

.app-gallery {
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-15px - 1.5rem);
    margin-right: calc(-15px - 1.5rem);
    padding-left: calc(30px + 0.75rem);
    padding-right: calc(30px + 0.75rem);
    .app-gallery-screen {
      height: 350px;
      width: auto;
      display: block;
      box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.8);
      border-radius: 5px;
      object-fit: contain;
    }
}


// use custom classes to toggle
// view usage / hide usage text

.collapsed > .when-open,
.not-collapsed > .when-closed {
  display: none;
}

// storage / ram usage list of apps
.app-stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 14.2rem;
    overflow-y: scroll;
    .app-stat-list-item {
        .app-stat-list-item-icon {
            height: 40px;
            width: 40px;
            border-radius: 8px;
        }
    }
}

// Toggle switch (sats to btc, temperature)

.toggle {
    border-radius: 54px;
    width: 120px;
    height: 36px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    cursor: pointer;
    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    background: linear-gradient(346.78deg, #f7fcfc 0%, #fafcfa 100%);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.1);
    .toggle-switch {
      margin: 2px;
      height: 30px;
      width: 60px;
      border-radius: 30px;
      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
      font-size: 1rem;
      font-weight: 600;
      background: #fff;
      //   color: #fff;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      &.toggle-left {
        transform: translateX(0);
      }
      &.toggle-right {
        transform: translateX(54px);
      }
    }
    &:hover {
      .toggle-switch {
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
      }
    }
    .toggle-bg-text {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      span {
        width: 60px;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: 600;
        color: #b4b7b9;
      }
    }
    &.toggle-sm {
      width: 80px;
      height: 26px;
      border-radius: 30px;
      box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.1);
      .toggle-bg-text {
        span {
          font-size: 0.75rem;
          color: #9c9c9c;
        }
      }
      .toggle-switch {
        margin: 2px;
        height: 20px;
        width: 40px;
        font-size: 0.75rem;
        border-radius: 30px;
        &.toggle-left {
          transform: translateX(0);
        }
        &.toggle-right {
          transform: translateX(34px);
        }
      }
      &:hover {
        .toggle-switch {
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }
      }
    }
  }