.timeline_item {
  $item-width-small: 60%;
  $item-width-medium: 80%;
  $item-width-large: 100%;

  $thumbnail-ratio: 16 / 9;

  $menu-margin: 5px;

  list-style: none;

  .timeline_item-wrapper,
  .timeline_item_spacer {
    width: 49%;
    float: left;
    clear: left;
    position: relative;
  }

  .timeline_item-wrapper {
    margin-bottom: 1.5%;
  }

  &.position_right {
    .timeline_item-wrapper,
    .timeline_item_spacer {
      float: right;
      clear: right;
    }
  }

  .timeline_item_editor_menu {
    position: absolute;
    top: 0;
    visibility: hidden;
    opacity: 0;
    @include transition(opacity 0.2s ease 0.5s,
                        visibility 0.2s ease 0.5s);
  }

  &:hover .timeline_item_editor_menu {
    visibility: visible;
    opacity: 1;
    @include transition(opacity 0.2s ease,
                        visibility 0.2s ease);
  }

  &.position_left {
    .timeline_item_editor_menu {
      margin-right: $menu-margin;
    }

    &.small .timeline_item_editor_menu {
      right: $item-width-small;
    }

    &.medium .timeline_item_editor_menu {
      right: $item-width-medium;
    }

    &.large .timeline_item_editor_menu,
    &.alignment_left .timeline_item_editor_menu {
      right: $item-width-large;
    }
  }

  &.position_right {
    .timeline_item_editor_menu {
      margin-left: $menu-margin;
    }

    &.small .timeline_item_editor_menu {
      left: $item-width-small;
    }

    &.medium .timeline_item_editor_menu {
      left: $item-width-medium;
    }

    &.large .timeline_item_editor_menu,
    &.alignment_right .timeline_item_editor_menu {
      left: $item-width-large;
    }
  }

  a {
    width: $item-width-medium;
    display: block;
    float: right;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
  }

  &.small {
    a {
      width: $item-width-small;
    }
  }

  &.large {
    a {
      width: $item-width-large;
    }
  }

  &.alignment_left {
    a {
      float: left;
    }
  }

  .timeline_item-tagline {
    display: block;
  }

  .timeline_item-thumbnail {
    padding-top: floor(percentage(1 / $thumbnail-ratio));
    background-size: 100% auto;
  }

  @include phone {
    .timeline_item_editor_menu {
      display: none;
    }

    .timeline_item-wrapper, &.position_right .timeline_item-wrapper {
      float: none !important;
      width: 100% !important;
      margin-bottom: 15px;
    }

    .timeline_item_spacer {
      display: none;
    }

    a, &.alignment_left a {
      float: none !important;
      width: $item-width-large !important;
    }
  }
}