@import "src/assets/styles/responsive-base.scss";

mat-icon{
  user-select: none;
}

#nano-manager-page {
  display: flex;
  flex: 1 1 auto;
  min-height: 100%;
  position: relative;

  #no-license-container{
    padding: 10px;
    font-size: 12px;
  }

  #nano-client-side-panel
  {
    display: flex;
    flex-direction: column;
    width: 225px;
    

    #nano-clients-spinner{
      margin: 20px auto;
    }

    .icon-size{
      font-size: 20px;
    }

    #nano-client-search-row{
      display: flex;
      justify-content: center;
      align-items: flex-start;

      margin: 16px 8px;

      @include screen('phone'){
        justify-content: space-between;
      }

      .no-show{
        display: none;

        @include screen('phone'){
          display: block;
          opacity: 0; 
          cursor: default;
        }
      }

      #nano-client-filter-input{
        margin: 0 10px;
      }

      >.mat-icon{
        width: 20px;
        height: 20px;
      }

      .sidebar-indicator{
        display: none;
        font-size: 20px;

        @include screen('phone'){
          display: block;
          transition: transform ease-in 0.15s;

          &.open{
            transform: rotate(180deg);
          }
        }
      }
    }

    .nano-client-row{
      display: flex;
      align-items: center;

      .nano-client-name{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    #nano-client-list{
      flex: 1 1 0;
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
        li{
          padding: 8px;
          cursor: default;
          user-select: none;
          &.selectable{
            cursor: pointer;
          }
          .mdi{
            margin-right: 10px;
          }
        }
      }
    }

    @include screen('phone'){
      position: absolute;
      right: -190px;
      top:0;
      min-height: 100%;
      z-index: 90;
      transition: right ease-in-out 0.25s;

      &.showSideBar{
        right: 0;
      }

      #nano-client-side-panel-click-trap{
        position: absolute;
        height: 100%;
        width: 100%;
      } 
    }
  }

  #nano-details{
    flex: 1 1 0;
    padding: 20px;
    position: relative;
    #nano-client-name-row{
      display: flex;
      align-items: center;
    }

    #nano-anonymous-access-row{
      display: flex;
      align-items: center;
      .mat-icon{
        margin-left: 5px;
        cursor: default;
      }
    }

    >div>div{
      margin-bottom: 10px;
    }

    #drives-list-title{
      margin-top: 40px;
    }

    #drive-list{
      max-width: 600px;
    }
    
    .drive-row{
      padding-top: 10px;

      .drive-title-row{
        display: flex;
        padding: 10px 0;
        align-items: center;

        >span{
          flex: 1 1 0;
          padding: 0 10px;
        }
        .mat-icon{
          cursor: default;
          &.mat-primary{
            cursor: pointer;
          }
        }
      }

      .drive-room-row{
        .drive-room-title{
          display: flex;
          align-items: center;

          app-avatar{
            width: 20px;
            height: 20px;
          }
        }

        display: flex;

        
        span{
          flex: 1 1 0;
          padding: 5px 0 5px 0px;
        }

        .mdi{
          font-size: 24px;
        }
        .mdi-book-remove-multiple{
          cursor: pointer;
        }
      }

      .drive-room-new-row{
        padding: 5px 0 5px 15px;
        cursor: pointer;
      }
    }

    .drive-new{
      margin-top: 10px;
      padding-top: 10px;
      cursor: pointer;
    }

    #admin-password-change-row{
      margin-top: 20px;
    }

    @include screen('phone'){
      margin-right: 30px;      

      #nano-client-details-click-trap{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
      }
    }
  }

  #overflow-alert{
    text-align: center;
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: default;

    mat-icon.mat-primary{
      width: 20px;
      height: 20px;
      font-size: 20px;
      margin-right: 10px;
    }
  }

  input{
    box-sizing: border-box;
  }
} 

:host {
  display: flex;
  height: 100%;

  > div {
    width: 100%;
    flex: 1 1 auto;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;

    > div {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
}
