/*
 * Make each label stack on top of one another.
 *
 */
#tab-menu {
  li#open-tab {
    background-color: $grey-tabs;
    max-width: 40px;
    padding-left: 10px;
  }
  li {
    background: $grey-tabs;
    cursor: pointer;
    height: 50px;
    padding: 0;
    position: relative;
    list-style: none;
    transition: 0.2s ease-in-out;
    width: 50px;
    cursor: hand;
    a {
      height: 100%;
      width: 100%;
      &:hover {
        color: $teal-main;
        transition: 0.2s ease-in-out;
      }
    }
    &.explorer {
      background: url('../images/icons/folder_inactive.svg') no-repeat center;
      &:hover {
        background: url('../images/icons/folder_active.svg') no-repeat center;
      }
      &.active{
        background: $white url('../images/icons/folder_active.svg') no-repeat center;
      }
    }
    &.examples {
      background: url('../images/icons/examples_inactive.svg') no-repeat center;
        &:hover {
          background: url('../images/icons/examples_active.svg') no-repeat center;
        }
        &.active {
          background: $white url('../images/icons/examples_active.svg') no-repeat center;
        }
      }
      &.settings {
        background: url('../images/icons/settings_inactive.svg') no-repeat center;
      &:hover {
        background: url('../images/icons/settings_active.svg') no-repeat center;
      }
      &.active {
        background: $white url('../images/icons/settings_active.svg') no-repeat center;
      }
    }
    &.pins {
        background: url('../images/icons/pins_inactive.svg') no-repeat center;
      &:hover {
        background: url('../images/icons/pins_active.svg') no-repeat center;
      }
      &.active {
        background: $white url('../images/icons/pins_active.svg') no-repeat center;
      }
    }
    &.refs {
      background: url('../images/icons/refs_inactive.svg') no-repeat center;
      &:hover {
        background: url('../images/icons/refs_active.svg') no-repeat center;
      }
      &.active {
        background: $white url('../images/icons/refs_active.svg') no-repeat center;
      }
    }
    &.libraries {
      background: url('../images/icons/library_white.svg') no-repeat center;
      &:hover {
        background: url('../images/icons/library_green.svg') no-repeat center;
      }
      &.active {
        background: $white url('../images/icons/library_green.svg') no-repeat center;
      }
    }
    &.feedback {
      background: url('../images/icons/feedback_inactive.svg') no-repeat center;
      &:hover {
        background: url('../images/icons/feedback_active.svg') no-repeat center;
      }
      &.active {
        background: $white url('../images/icons/feedback_active.svg') no-repeat center;
        border-left: 5px solid $accent-red;
      }
    }
  &.active {
    background: $white;
    border-bottom: none;
    border-left: 5px solid $teal-main;
    // If there isn't a border-bottom of none, there's a weird bevel on the tab highlight.
    margin-left: -5px;
    transition: 0.2s ease-in-out;
    a {
      color: $teal-main;
    }
  }
  }
}

.rot {
	display: block;
	transform: rotate(45deg);
	transition: 0.3s ease-in-out;
}

.tab-button {
	color: rgba(255, 255, 255, 0.9);
  font-family: space_bold;
  font-size: 50px;
  font-weight: bolder;
  margin: 0;
	line-height: 50px;
  // padding-left: 10px;
  text-decoration: none;
}

.tab-content-area {
  display: none;
}
