// В этом файле должны быть стили для БЭМ-блока to-top, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

$transition-time:             0.3s !default;

.to-top {

  $block-name:                &; // #{$block-name}__element

  position: fixed;
  z-index: 99;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #000;
  color: transparent;
  font: 0/0 a; // stylelint-disable-line
  // см. bg-img/to-up.svg
  // http://yoksel.github.io/url-encoder/ru/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' width='17' height='11'%3E%3Cpath fill='%23fff' d='M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
  transition: opacity $transition-time;

  .js & {
    opacity: 0;
    visibility: hidden;

    &--visible {
      opacity: 1;
      visibility: visible;
    }
  }
}
