@import "./variables.scss";

$namespace: $docs-viewer-namespace;

.#{$namespace}-content {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.#{$namespace}-preview-mask {
  display: none;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.#{$namespace}-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 300;
  top: 0;
  left: 0;
  width: 33%;
  max-width: 200px;
  height: 100%;
  padding-top: 10px;
  transform: translateX(-100%);
  background: rgba(237, 237, 240, 0.9);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.11);
  transition: transform 0.4s;
}

.#{$namespace}-preview-active {
  .#{$namespace}-preview-mask {
    display: block;
  }

  .#{$namespace}-preview {
    transform: translateX(0);
  }
}

.#{$namespace}-preview-page {
  position: relative;
  display: block;
  width: 55%;
  margin-bottom: 10px;
  font-size: 0;
  color: transparent;
  outline: none;
  border: 7px solid transparent;
  border-radius: 4px;
  transition: border-color 0.3s;
  user-select: none;

  &:hover,
  &.#{$namespace}-preview-page-active {
    border-color: rgba(68, 78, 96, 0.1);
  }

  & > img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 1px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  }
}

.#{$namespace}-preview-page-name {
  position: absolute;
  top: 1px;
  left: -10px;
  transform: translate(-100%);
  text-align: right;
  font-size: 12px;
  color: #5f5f5f;
  user-select: none;
}

.#{$namespace}-footer {
  box-sizing: border-box;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid #eeeef7;
  color: #191919;
}

.#{$namespace}-float-footer {
  width: 100%;
  min-height: 26px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(249, 249, 252, 0.9);
  transition: opacity 0.4s;
}

.#{$namespace}-footer-btn {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  font-size: 0;
  margin: 0;
  padding: 3px;
  border: none;
  border-radius: 1px;
  outline: none;
  color: currentColor;
  background: transparent;
  transition: background 0.4s;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &:hover {
    background: rgba(237, 237, 240, 0.9);
  }

  @media (hover: none) {
    &:hover {
      background: transparent !important;
    }
  }

  & > svg {
    width: 100%;
    height: 100%;
  }

  & > svg:nth-of-type(2) {
    display: none;
  }

  &.#{$namespace}-footer-btn-playing {
    & > svg:nth-of-type(1) {
      display: none;
    }

    & > svg:nth-of-type(2) {
      display: initial;
    }
  }

  & ~ & {
    margin-left: 15px;
  }
}

.#{$namespace}-page-jumps {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.#{$namespace}-page-number {
  margin-left: auto;
  font-size: 13px;
  user-select: none;
  white-space: nowrap;
  word-break: keep-all;
}

.#{$namespace}-page-number-input {
  border: none;
  outline: none;
  width: 3em;
  margin: 0;
  padding: 0 2px;
  text-align: right;
  font-size: 13px;
  line-height: 1;
  font-weight: normal;
  font-family: inherit;
  border-radius: 2px;
  color: currentColor;
  background: transparent;
  transition: background 0.4s;
  user-select: text;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &:hover,
  &:focus,
  &:active {
    background: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
}

.#{$namespace}-readonly {
  .#{$namespace}-footer-btn {
    cursor: not-allowed;

    &:hover {
      background: transparent;
    }
  }

  .#{$namespace}-page-number-input {
    cursor: not-allowed;

    &:hover,
    &:focus,
    &:active {
      background: transparent;
      box-shadow: none;
    }

    &:disabled {
      color: inherit;
    }
  }

  &.#{$namespace}-float-footer {
    display: none;
  }
}

.telebox-color-scheme-dark {
  .#{$namespace}-page-number-input {
    color: #a6a6a8;
  }
  .#{$namespace}-page-number-input:active,
  .#{$namespace}-page-number-input:focus,
  .#{$namespace}-page-number-input:hover {
    color: #222;
  }
  .#{$namespace}-footer {
    color: #a6a6a8;
    background: #2d2d33;
    border-top: none;
  }
  .#{$namespace}-footer-btn:hover {
    background: #212126;
  }
  .#{$namespace}-preview {
    background: rgba(50, 50, 50, 0.9);
  }
}