@import "../../core/Variables.less";

.bookmarks {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  justify-content: flex-end;
  margin: 2px 30px 0 30px;
  flex-wrap: wrap;
  min-width: 40px;

  &.bookmarks-hidden {
    visibility: hidden;
  }

  li {
    display: none;
    flex: 0 0 auto;
  }

  .bookmark.visible, .dropdown.visible {
    display: list-item;
  }

  .bookmark {
    cursor: pointer;
    margin-left: 12px;
    color: @gray-lighter;
    border-bottom: 3px solid transparent;
    font-size: 14px;

    &:hover {
      border-bottom-color: @btn-info-border;
    }

    &.active {
      border-bottom-color: @btn-info-border;
      color: #FFF;
    }
  }

  .dropdown {
    margin-left: 12px;
    cursor: pointer;

    .dropdown-toggle {
      color: @gray-lighter;
      &:hover {
        color: @btn-info-border;
        text-decoration: none;
      }
    }

    &.active .dropdown-toggle {
      color: @btn-info-border;
      &:hover {
        color: darken(@btn-info-border, 5%);
      }
    }

    .dropdown-menu {
      background: black;
      padding: 10px 20px;
    }

    .bookmark {
      white-space: nowrap;
      margin-left: 0;
      border: none;
      border-left: 3px solid transparent;
      padding-left: 10px;

      &:hover {
        border-left-color: @btn-info-border;
      }

      &.active {
        border-left-color: @btn-info-border;
      }
    }
  }
}

/*
 * Responsive
 */
body.mobile-view .story-header {
  .bookmarks {
     margin: 0 10px;
  }
}
