@import 'variables';

#navigation-content {
  div.home-nav {
    padding-left: 10px;
    margin-bottom: 20px;
    font-weight: bold;

    &.in {
      background-color: #f8f8f8;
      border: 2px solid #f8f8f8;
    }

    span.home {
      opacity: 0.5;
    }

    i {
      vertical-align: middle;
      margin-right: 4px;
    }

    @media (#{$narrow-viewport}) {
      display: none;
    }
  }

  div.cotonomas-nav {
    @media (#{$wide-viewport}) {
      padding-left: 10px;
    }
  }

  div.navigation-title {
    margin-bottom: 4px;
    color: #ccc;
    font-weight: bold;
  }

  div.current {
    margin-bottom: 20px;

    div.sub-cotonomas {
      margin-left: 10px;
    }

    &.has-super-cotonomas div.this-cotonoma {
      margin-left: 10px;
    }
  }

  div.global-cotonomas,
  div.watchlist,
  div.recent-cotonomas {
    margin-bottom: 20px;
  }

  div.global-cotonomas div.navigation-title i {
    vertical-align: bottom;
    font-size: 18px;
  }

  div.watchlist div.navigation-title i {
    font-size: 20px;
    vertical-align: -5px;
    margin-right: 2px;
  }

  div.coto-as-cotonoma {
    position: relative;
    display: flex;
    padding-left: 1px;
    margin-bottom: 1px;
    border: 2px solid #fff;

    &.in {
      background-color: #f8f8f8;
      border: 2px solid #f8f8f8;

      span.cotonoma-name {
        opacity: 0.5;
      }
    }

    &.coto-focus {
      border: 2px dotted #eee;
      background-color: #fafafa;
    }

    &.selected {
      border: 2px solid #ffa500;
    }

    i {
      vertical-align: middle;
    }

    &.not-active div.cotonoma-link {
      opacity: .3;
    }

    span.not-accessible i {
      font-size: 16px;
      vertical-align: -4px;
    }

    div.touch-space-to-open-tools {
      width: 20px;

      @media (#{$wide-viewport}) {
        display: none;
      }
    }

    span.coto-tool-buttons {
      top: -30px;
      right: 0;
      height: 24px;
      padding: 0;
      padding-top: 3px;
      padding-bottom: 3px;
      padding-right: 10px;
      background-color: rgba(255, 255, 255, .9);

      a.tool-button {
        margin-left: 10px;

        &.edit-coto,
        &.add-coto {
          display: none;
        }

        i.material-icons {
          font-size: 22px;
        }

        i.fa {
          width: 22px;
          text-align: center;
          font-size: 20px;
        }

        i.fa-link {
          vertical-align: -5px;
        }
      }

      span.border {
        height: 20px;
        vertical-align: middle;
      }

      @media (#{$wide-viewport}) {
        padding-right: 4px;

        a.tool-button {
          margin-left: 4px;
        }
      }
    }

    &.element-focus span.coto-tool-buttons {
      display: inline-block !important;
    }
  }

  div.cotonoma-link {
    flex: 1;
    padding-right: 4px;
    position: relative;

    img.avatar {
      width: 20px;
      height: 20px;
    }

    span.shared i {
      font-size: 16px;
    }

    i.unread {
      position: absolute;
      top: -5px;
      left: 10px;
      font-size: 16px;
      color: #f33;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }
  }
}
