$name: 'ivue-image';

:root {
  --#{$name}-font-size: 14px;

  // preview
  --#{$name}-preview-font-size: 16px;
  --#{$name}-preview-icon-size: 40px;
  --#{$name}-preview-icon-font-size: 26px;
  --#{$name}-preview-close-position: 16px;
  --#{$name}-preview-arrow-font-size: 35px;

  // toolbar
  --#{$name}-toolbar-bottom: 30px;
  --#{$name}-toolbar-height: 40px;
  --#{$name}-toolbar-radius: 4px;
  --#{$name}-toolbar-transform: translate(-50%);

  // toolbar-item
  --#{$name}-toolbar-item-margin: 0 6px;
  --#{$name}-toolbar-item-padding: 4px 8px;
  --#{$name}-toolbar-item-width: 36px;
  --#{$name}-toolbar-item-height: 40px;

  // color
  --#{$name}-mark-color: rgba(55, 55, 55, 0.6);
  --#{$name}-preview-color: rgba(55, 55, 55, 0.4);
}

.#{$name} {
  position: relative;
  display: inline-block;
  overflow: hidden;

  &-content {
    position: relative;
    width: 100%;
    height: 100%;

    &:hover {
      .#{$name}-mark {
        opacity: 1;
      }
    }
  }

  &-img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }

  &-loading,
  &-error {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--#{$name}-font-size);
    z-index: 1;
    color: var(--ivue-primary-color);
  }

  &-error {
    color: var(--ivue-error-color);
  }

  // 悬浮层
  &-mark {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--#{$name}-mark-colo);
    z-index: 1;
    color: var(--ivue-white-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--#{$name}-font-size);
    transition: opacity 0.3s;
    opacity: 0;
    user-select: none;
    background-color: var(--#{$name}-mark-color);
  }

  // 图片预览
  &-preview {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    // 蒙版
    &-mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--#{$name}-mark-color);
      height: 100%;
    }

    &-wrapper {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      user-select: none;
      overflow: hidden;
    }

    // 加载中
    &-loading,
    &-error {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    // 加载错误
    &-error {
      color: var(--ivue-error-color);
      font-size: var(--#{$name}-preview-font-size);
    }

    // 图片
    &-image {
      cursor: grab;
    }

    // transition
    &-transition {
      transition: transform 0.3s ease;
    }

    // 限制图片大小
    &-limit {
      max-width: 100%;
      max-height: 100%;
    }

    // 隐藏图片
    &-hidden {
      display: none;
    }

    // 抓取
    &-grabbing {
      cursor: grabbing;
    }

    // 关闭
    .#{$name}-preview-close,
    // 左按钮
    .#{$name}-preview-left,
    // 右按钮
    .#{$name}-preview-right {
      width: var(--#{$name}-preview-icon-size);
      height: var(--#{$name}-preview-icon-size);
      line-height: var(--#{$name}-preview-icon-size);
      border-radius: 50%;
      color: var(--ivue-white-color);
      z-index: 1;
      font-size: var(--#{$name}-preview-icon-font-size);
      cursor: pointer;
      background: var(--#{$name}-preview-color);
    }

    .#{$name}-preview-close {
      position: absolute;
      right: var(--#{$name}-preview-close-position);
      top: var(--#{$name}-preview-close-position);
    }

    // 左按钮
    .#{$name}-preview-left {
      position: absolute;
      top: 50%;
      left: var(--#{$name}-preview-close-position);
      transform: translateY(-50%);
      font-size: var(--#{$name}-preview-arrow-font-size);
    }

    // 右按钮
    .#{$name}-preview-right {
      position: absolute;
      top: 50%;
      right: var(--#{$name}-preview-close-position);
      transform: translateY(-50%);
      font-size: var(--#{$name}-preview-arrow-font-size);
    }

    // 菜单
    &-toolbar {
      position: absolute;
      left: 50%;
      bottom: var(--#{$name}-toolbar-bottom);
      height: var(--#{$name}-toolbar-height);
      z-index: 1;
      border-radius: var(--#{$name}-toolbar-radius);
      background: var(--#{$name}-preview-color);
      transform: var(--#{$name}-toolbar-transform);
      overflow: hidden;
      display: flex;
      flex-flow: row wrap;
      flex-wrap: nowrap;
      align-items: center;

      .#{$name}-preview-toolbar--item {
        flex: 1 1 0%;
        position: relative;
        max-width: 100%;
        min-height: 1px;
        margin: var(--#{$name}-toolbar-item-margin);
        padding: var(--#{$name}-toolbar-item-padding);
        width: var(--#{$name}-toolbar-item-width);
        height: var(--#{$name}-toolbar-item-height);
        color: var(--ivue-white-color);
        cursor: pointer;
        transition: opacity 0.1s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          opacity: 0.75;
        }
      }

      .#{$name}-preview-toolbar--wait {
        cursor: wait;
      }

      .ivue-load-loop {
        animation: ivue-load-loop 1s linear infinite;
      }

      @keyframes ivue-load-loop {
        from {
          transform: rotate(0deg);
        }

        50% {
          transform: rotate(180deg);
        }

        to {
          transform: rotate(360deg);
        }
      }
    }
  }
}