@forward 'theme';
@forward 'components';
@forward 'layout';



// TODO
// - states 
//   - tab picker 
//   - search 
//   - dropdown
//   - tooltip
//   - hover
// - dropdowns (tether)
//   - team
//   - recent
//   - collaborators
//   - side of navbar
// - tooltips (tether)
// - animation
//   - cross component animation?
// - close search (detect empty value)
// - fixed width centered content

$color-avatarBackground: #c9cfd3;
$color-avatarText: #8C96A9;
$color-background: #f9f9fb;
$color-blue: #0090e8;
$color-border: #E9E9EB;
$color-green: #00c67b;
$color-overlay: #1f2532;
$color-overlayBorder: rgba(white, 0.2);
$color-primaryText: #434C5E;
$color-red: #FF3B71;
$color-secondaryText: #8C96A9;
$color-siteNavigator: #1f2532;
$color-siteNavigatorIcon: #596377;
$color-topLink: #596377;
$color-topLinkSelected: #D3D8E0;
$color-yellow: #fdc228;

* {
  box-sizing: inherit;
  font-family: inherit;
  position: relative;
}

body {
  background-color: $color-background;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
}

#content {
  width: 100%;
}

.actionButton {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  outline: none;
  padding: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.avatar-background {
  fill: $color-avatarBackground;
}

.avatar-name {
  dominant-baseline: central;
  fill: $color-avatarText;
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  text-transform: uppercase;
}

.projectCard {
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(black, 0.1), 0 2px 3px rgba(black, 0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease-in-out;
  
  &:hover {
    box-shadow: 0 2px 5px rgba(black, 0.1), 0 8px 16px rgba(black, 0.2);
    
    .projectCard-overlay {
      opacity: 1;
    }
    
    .projectCard-starButton {
      opacity: 1;
    }
    
    .projectOverlay-action {
      opacity: 1;
      transform: translateY(0);
    }
    
    .projectOverlay-button {
      opacity: 1;
      transform: translateY(0);
    }
    
    .projectOverlay-collaborators {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.projectCard-block {
  border-top: 1px solid $color-border;
  flex-shrink: 0;
  padding: 30px;
}

.projectCard-image {
  background-size: cover;
  flex-grow: 1;
  min-height: 0;
}

.projectCard-overlay {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s ease-in-out;
}

.projectCard-starButton {
  opacity: 0;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease-in-out;
  
  &:hover {
    .projectCard-starIcon {
      color: $color-yellow;
    }
  }
  
  &.projectCard-starButton--starred {
    .projectCard-starIcon {
      color: $color-yellow;
    }
  }
}

.projectCard-starIcon {
  color: $color-secondaryText;
  font-size: 22px;
  transition: color 0.2s ease-in-out;
}

.projectCard-subtitle {
  color: $color-secondaryText;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.projectCard-title {
  color: $color-primaryText;
  font-size: 16px;
}

.projectList {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.projectList-content {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding-bottom: 30px;
  padding-right: 30px;
}

.projectList-navigator {
  flex-shrink: 0;
}

.projectList-project {
  height: 300px;
  margin-left: 30px;
  margin-top: 30px;
  width: 370px;
}

.projectOverlay {
  align-items: center;
  background-color: rgba($color-overlay, 0.8);
  display: flex;
  justify-content: center;
}

.projectOverlay-action {
  flex-shrink: 0;
  
  &:not(:first-child) {
    margin-left: 10px;
  }
  
  &:hover {
    .projectOverlay-actionIcon {
      color: $color-blue;
    }
  }
}

.projectOverlay-actionIcon {
  color: white;
  font-size: 18px;
  transition: color 0.2s ease-in-out;
}

.projectOverlay-actions {
  display: flex;
  left: 10px;
  position: absolute;
  top: 10px;
}

.projectOverlay-button {
  background-color: transparent;
  border: 1px solid $color-overlayBorder;
  border-radius: 20px;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  height: 38px;
  letter-spacing: 1px;
  margin-top: 10px;
  opacity: 0;
  outline: none;
  text-transform: uppercase;
  transform: translateY(-10px);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  width: 160px;
  
  &:hover {
    background-color: $color-green;
    border-color: $color-green;
  }
}

.projectOverlay-collaborator {
  flex-shrink: 0;
  margin-left: -2px;
}

.projectOverlay-collaborators {
  display: flex;
  flex-shrink: 0;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.projectOverlay-view {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.projectNavigator {
  display: flex;
  height: 50px;
  padding: 0 30px;
}

.projectNavigator-filter {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: $color-secondaryText;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;
  
  &:not(:first-child) {
    margin-left: 30px;
  }
  
  &:hover {
    color: $color-primaryText;
  }
  
  &.projectNavigator-filter--selected {
    border-bottom-color: $color-red;
    color: $color-red;
  }
}

.projectNavigator-filters {
  display: flex;
  flex-shrink: 0;
  margin-left: 30px;
}

.projectNavigator-search {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.projectNavigator-searchIcon {
  color: $color-primaryText;
  font-size: 26px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.projectNavigator-searchInput {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: $color-primaryText;
  flex-grow: 1;
  font-size: 14px;
  min-height: 0;
  outline: none;
  padding-left: 26px;
  transition: border-color 0.2s ease-in-out, width 0.2s ease-in-out;
  width: 26px;
  
  &::placeholder {
    color: $color-secondaryText;
  }
  
  &:focus {
    border-bottom-color: $color-red;
    width: 220px;
  }
}

.site {
  display: flex;
  flex-direction: column;
  min-width: 1230px;
  width: 100%;
}

.site-content {
  flex-shrink: 0;
}

.site-navigator {
  flex-shrink: 0;
}

.siteNavigator {
  background-color: $color-siteNavigator;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.siteNavigator-icon {
  color: $color-siteNavigatorIcon;
  font-size: 18px;
  margin-left: 10px;
}

.siteNavigator-teams {
  align-items: center;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 1px;
  margin: 40px 0;
}

.siteNavigator-topLink {
  align-items: center;
  color: $color-topLink;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;
  
  &:not(:first-child) {
    margin-left: 30px;
  }
  
  &:hover {
    color: $color-topLinkSelected;
  }
  
  &.siteNavigator-topLink--selected {
    color: $color-topLinkSelected;
  }
}

.siteNavigator-topLinks {
  display: flex;
  flex-shrink: 0;
  margin-top: 20px;
}