.highlight {
	color: $light;
	cursor:pointer;
	transition: all .25s;
	text-decoration:none;
}

.highlight:hover {
	text-decoration:underline;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

body, html {
	font-family: 'Open Sans', sans-serif;
	margin:0;
	padding:0;
}
body {
	font-size:80%;
	line-height:1.5em;
	color: $lighter;
	background-color: $darker;
}

ul, li {
	margin:0;
	padding:0;
	list-style:none;
}

#cloud-explorer {
  h1 {
    font-weight: 200;
    background: #222;
    margin: 0;
    padding: 15px;
  }
  .tabs-component {
    position: absolute;
    /* leave space for the h1 => use height instead
    top: 0;
    bottom: 0;
    */
    height: 90%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
  }
  .tab-bar-component {
    background-color: $black;
    li {
      display: inline-block;
      padding: 10px 30px;
      cursor: pointer;
      font-size: 1.2em;
      background-color: transparent;
      color: $light;
    }
    li.selected {
      background-color: $darker;
    }
  }
  .cloud-explorer-component{
    flex: 1 1 auto;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    padding:1em;
  }
  .search-bar-component {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
  }
}

#cloud-explorer .files {
	flex-grow:10;
	display:flex;
	flex-direction:column;
	background-color: $dark;
}

#cloud-explorer .files input.file-name-input {
	border:0;
	outline:0;
	margin:0;
	padding:0;
	width: 100%;
}

#cloud-explorer .files > section {
	flex-grow:10;
	overflow-y:scroll;
	border: $thick-border;
	border-radius: $border-radius;
	height: 0; /* (no idea why) makes the height of the scrollable area 100% */
}

#cloud-explorer .files > li {
	@extend .noselect;
	border-bottom: $thin-border;


	& label {
		flex-grow:10;
		font-weight:400;
	}
}

#cloud-explorer ul.inline-button-bar {
	opacity:0;
	display:flex;
	flex-direction:row;
	& li {
		@extend .highlight;
		padding:0 1em;
		a:visited,
		a:link {
			@extend .highlight;
		}
	}
}

#cloud-explorer ul.files > li:hover .inline-button-bar,
#cloud-explorer ul.files > li.selected .inline-button-bar {
	opacity:1;
}

#cloud-explorer .files .file-list-item {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;

	& > .inline-button-bar {
		& .disabled {
			display: none;
		}
	}
}

/* basic style for demo */
/*#cloud-explorer li,*/
#cloud-explorer .button-bar li,
#cloud-explorer .breadcrumbs.panel li,
#cloud-explorer .upload.button {
	@extend .highlight;

	&.disabled, &.disabled:hover {
		cursor: default;
		color: $light;
		opacity: .6;
		pointer-events: none;
		text-decoration: none;
	}
}


#cloud-explorer li.selected {
	cursor: default;
	background-color:$active-bg;
	color:$lighter;
	& .inline-button-bar li a:link,
	& .inline-button-bar li a:visited,
	& .inline-button-bar li {
		color:$lighter;
		text-decoration: none;
	}
}
#cloud-explorer li.selected:hover {
	text-decoration:none;
}

#cloud-explorer .button-bar,
#cloud-explorer .top-button-bar {
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	flex-wrap:wrap;
	//margin-bottom:-1em;
	//min-height:4em;
}

#cloud-explorer .button-bar.button-confirm .file-name label {
  display: block;
  margin-left: .5em;
  margin-top: -12px;
  padding-bottom: 0px;
  font-size: medium;
}

#cloud-explorer .button-bar.button-confirm .file-name  input {
  padding-top: 0;
}

#cloud-explorer .button-bar ul {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content: center;
	text-align: center;
}

#cloud-explorer .button-bar li {
	flex-grow:1;
	margin-left:-1px;
	padding:.5em 1em;
	border: $thin-border;
}
#cloud-explorer .button-bar li:first-child {
	margin-left:0;
}

#cloud-explorer .button-bar li.enabled:hover {
	text-decoration:none;
	background-color:$button-hover;
	border-color:$lighter;
	color:$lighter;
	z-index: 1; /* the border of buttons must be over the other buttons */
}

#cloud-explorer .button-bar li:nth-last-child(1) {
	border-radius:0 $border-radius $border-radius 0;
}
#cloud-explorer .button-bar li:nth-child(1){
	border-radius:$border-radius 0 0 $border-radius;
}

#cloud-explorer .button-icon {
	margin-right: 8px;
	vertical-align: middle;
}

#cloud-explorer .badge {
	left: 5px;
	top: 6px;
}

#cloud-explorer .files li.selected {
	background-color:$active-bg;
}

#cloud-explorer .files .icon {
	@extend .fa;
	display:inline-block;
	margin-right:1em;
}

#cloud-explorer .application.json.folder.icon {
	// service, really
	@extend .fa-lock;
  &.loggedin {
    @extend .fa-unlock;
  }
}

#cloud-explorer .folder.icon {
	@extend .fa-folder-o;
}

#cloud-explorer .file.icon {
	@extend .fa-file-o;
}

#cloud-explorer .application.git-repo.icon {
	@extend .fa-github;
}

#cloud-explorer .application.git-branch.icon {
	@extend .fa-github-square;
}

.panel {
	padding:0 1em;
}

.panel h2 {
	text-transform: uppercase;
	color:$light;
	font-size:1em;
	margin:0 0 .5em 0;
	border-top: 1px solid transparent;
	border-bottom:1px solid $light;
	padding:.5em 1em;
}

.panel li {
	padding:.5em 1em;
}

.panel h2,
.dialogs h2 {
	display:none;
}

.panel {
	padding:0;
	clear:right;
}

input, button {
	border-color:transparent;
	padding:.5em;
	background:transparent;
	color:inherit;
	font-size:inherit;
	font-family:inherit;
	display:inline-block;
	margin:0 .5em .5em .5em;
}

input {
	border-color:transparent;
	border-width:1px;
	border-bottom: 1px solid $light;
}

button {
	color:$light;
	border-radius:.5em;
	cursor:pointer;
	font-weight:600;
	text-transform:uppercase;
	transition:all .25s;
	padding:.5em 1em;
}

button:hover {
	background-color:$active-bg;
	color:$lighter;
}


#cloud-explorer .breadcrumbs {
	border:1px solid transparent;
}

#cloud-explorer .breadcrumbs li {
	display:inline-block;
	padding:.5em .5em;
	color:$dark;
}
#cloud-explorer .breadcrumbs li:last-child {
	color:$lighter;
	cursor:default;
	&:hover {
		color:$lighter;
		text-decoration:none;
	}
}

#cloud-explorer .breadcrumbs li:hover,
#cloud-explorer .upload.panel .button:hover
{
	@extend .highlight;
}
.breadcrumbs .icon {
	@extend .fa;
	margin-right:1em;
}
.breadcrumbs .home .icon {
	@extend .fa-home;
	margin-right:0;
	margin-left:.5em;
}

.loading .breadcrumbs .home .icon {
	@extend .fa-spin;
	@extend .fa-gear;
	color:orange;
}

.loading .files {
	opacity:0.5;
}

.loading.cached .files {
	opacity:1;
}

.breadcrumbs .folder .icon {
	@extend .fa-angle-right;
}

.dialogs .dialog-bg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(0, 0, 0, .5);
}

.modal-dialog .dialog-content {
	position:absolute;
	top:0;
	left:0;
	right:0;
	border-radius:.25em;
	margin:1em auto;
	width:500px;
	max-width:100%;
	min-height:200px;
	background-color:$darker;
	color:$lighter;
	// box-shadow: 0 0 .5em $dark;
	clear:both;
	overflow:auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 15px 0;
	border: 2px solid white;
}

.modal-dialog h2 {
	display:block;
	padding-top: 0;
	padding-bottom: 15px;
}

.modal-dialog p {
	padding: 15px;
}

.modal-dialog .button-bar ul {
    margin-left: auto;
    margin-right: 15px;
}

.upload.button {
	padding:1em;
	text-align:center;
}