body {
  overflow: hidden;
}

#app {
  display: flex;
  height: 100vh;
  width: 100vw;

  > main {
    width: calc(100% - 224px);
    border-left: $border-width solid $border-color;
    border-top-left-radius: $border-radius * 1.5;
    border-bottom-left-radius: $border-radius * 1.5;
    background-color: $dfi-scent;

    .main-wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
      position: relative;
    }

    .header-bar {
      position: relative;
      height: 112px;
      border-bottom: $border-width solid $border-color;
      padding: 26px 32px 24px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-shrink: 0;

      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
        -webkit-app-region: drag;
      }

      > h1,
      > .nav,
      > .btn-group,
      > .btn {
        flex-grow: 1;
      }

      a,
      button,
      .input-group,
      svg {
        -webkit-app-region: no-drag;
      }

      h1 {
        margin-bottom: 0;
      }

      .nav {
        margin-bottom: -8px;
      }

      > .btn-group {
        display: flex;
        justify-content: flex-end;
        margin-right: -16px;
        margin-bottom: -8px;

        .btn {
          flex-grow: 0;
        }
      }

      .header-bar-back {
        position: absolute;
        left: 12px;
        top: 12px;
        text-transform: uppercase;
      }

      .update-available {
        position: absolute;
        top: 16px;
        right: 24px;

        > * {
          display: block;
        }

        > .btn {
          text-transform: none;
          letter-spacing: 0.21px;
          font-weight: $font-weight-medium;

          &:hover {
            color: $gray-900;
          }

          svg {
            color: $green;
            margin-right: 4px;
            width: 12px;
            height: 12px;
          }
        }
      }

      @include media-breakpoint-down(sm) {
        .btn span {
          display: none;
        }

        .btn svg {
          margin-right: 0;
        }
      }
    }

    .content {
      flex-grow: 1;
      overflow: auto;
      padding: 32px;

      section {
        margin-bottom: 8px;
      }
    }

    .footer-bar {
      position: relative;
      z-index: $zindex-modal;
      padding: 16px 32px;
      background-color: $dfi-scent;
      border-top: $border-width solid $border-color;
      border-bottom-left-radius: $border-radius * 1.5;
      width: 100%;

      &-back {
        padding-left: 0;
        padding-right: 0;
      }

      &.dark-bg {
        background-color: $dfi-scent;
      }
    }

    .footer-sheet {
      min-height: 192px;
      padding-top: 1rem;
      padding-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-sheet-icon {
      width: 48px;
      height: 48px;
      color: $green;
      margin-bottom: 1rem;
    }
  }

  .footer-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    z-index: $zindex-modal-backdrop;
    width: 100%;
    height: 100%;
    background-color: $modal-backdrop-bg;
    opacity: $modal-backdrop-opacity;
    display: none;

    &.show-backdrop {
      display: block;
    }
  }

  [class^='txn-status-'] {
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 12px;
    height: 12px;
    border-radius: 6px;
  }

  .txn-status-confirmed,
  .txn-status-enabled {
    background-color: $green;
  }

  .txn-status-disable {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

a,
button,
.input-group,
svg {
  -webkit-app-region: no-drag;
}

.fullWidthDropdown {
  width: 100%;

  button {
    width: 100%;
    text-align: start;
    display: block;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: 1.5rem;
  }
}

$cardRadius: 0.5rem;

.cardTable {
  .balanceTokenCard {
    .card {
      border-bottom: none;
      border-radius: 0;
    }

    &:first-child {
      .card {
        border-top-left-radius: $cardRadius;
        border-top-right-radius: $cardRadius;
      }
    }

    &:last-child {
      .card {
        border-bottom: 1px solid $border-color;
        border-bottom-left-radius: $cardRadius;
        border-bottom-right-radius: $cardRadius;
      }
    }
  }
}

.cursorPointer {
  cursor: pointer;
}
