.add-to-calendar {
  position: relative;
  display: inline-block;
  background: transparent;

  var {
    display: none
  }

  &__link {
    display: inline-block;
    outline: none;
    cursor: pointer;
    width: 30px;
    height: 30px;

    &:before,
    &:after {
      width: 30px;
      height: 30px;
      background-image: url(../img/svg/Calendar.svg);
      background-repeat: no-repeat;
      background-position: 50%;
      display: block;
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity .2s linear;

      .article-detail & {
        background-image: url(../img/svg/Calendar_big.svg);
      }
    }

    &:after {
      background-image: url(../img/svg/Calendar_lb.svg);
      opacity: 0;

      .article-detail & {
        background-image: url(../img/svg/Calendar_big_lb.svg);
      }
    }

    &:hover:before {
      opacity: 0;
    }

    &:hover:after {
      opacity: 1;
    }
  }

  .atcb-link:focus~ul,.atcb-link:active~ul,.atcb-list:hover {
    visibility: visible
  }
  .atcb-list,.atcb-item {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff
  }
  .atcb-list {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    width: 170px;
    z-index: 900;
    top: 50px;
    left: 50%;
    padding: 10px 25px;
    transform: translateX(-14px);
    box-shadow: 0 -2px 8px 3px rgba(0,0,0,.1);
  }
  .atcb-item {
    float: none;
    text-align: left;
    margin-bottom: 0rem;
    line-height: 2.5rem;
  }

  .atcb-item-link {
    text-decoration: none;
    outline: none;
    display: block;
    padding: 5px 0;
  }

  .atcb-item.hover,.atcb-item:hover {
    position: relative;
    z-index: 900;
    cursor: pointer;
    text-decoration: none;
    outline: none
  }

  .atc-style-button-icon .atcb-link,.atc-style-button-icon .atcb-link:hover,.atc-style-button-icon .atcb-link:active,.atc-style-button-icon .atcb-link:focus {
    text-decoration: none;
    outline: none;
    padding: 2px
  }

  .tip {
    width: 0;
    height: 0;
    border-color: transparent transparent #fff;
    border-style: solid;
    border-width: 0 7px 10px;
    position: absolute;
    top: -10px;
    left: 19px;
    transform: translateX(-50%);
  }
}