@import "../lib.less";
@import "../variables/components/lightbox.less";
@import "../variables/components/button.less";

.@{veui-prefix}-lightbox {
  display: flex;
  flex-direction: column;
  .fixed(0);
  padding: @veui-lightbox-padding-y @veui-lightbox-padding-x;
  color: @veui-lightbox-font-color;
  font-size: @veui-lightbox-font-size;

  &-mask {
    background-color: @veui-lightbox-backdrop-color;
    overflow: hidden;
    transform: none;
  }
  &-head {
    position: relative;
    text-align: center;

    &-close.@{veui-prefix}-button {
        .absolute(0, 0, _, _);
        z-index: 1;
        &,
        &:hover,
        &[data-focus-visible-added],
        &:active {
          color: @veui-button-font-color-translucent;
        }
        .@{veui-prefix}-icon {
          .veui-icon-size(@veui-lightbox-close-icon-size);
        }
    }
  }

  &-content {
    flex-grow: 1;
    overflow: hidden;
    width: 100%;
    pointer-events: auto;
  }

  &-viewport {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
  }

  &-viewport-content {
    .size(100%);
    padding: @veui-lightbox-content-spacing-y @veui-lightbox-content-spacing-x;
    padding-bottom: 0;
  }

  &-items {
    position: relative;
    .reset-list-style();
    .size(100%);
    margin: 0;
    padding: 0;
  }

  &-item {
    .absolute(0, _, _, 0);
    display: flex;
    overflow: hidden;
    .size(100%);
    .veui-transition(opacity);
    outline: none;

    &-content-container {
      display: flex;
      flex-direction: column;
      outline: none;
      justify-content: center;
      width: 100%;
      max-height: 100%;
      flex: 1 0 auto;
    }
    &-content {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      text-align: center;
      width: 100%;
      flex: 0 1 auto;

      img {
        max-height: 100%;
        max-width: 100%;
      }
      video {
        max-height: 100%;
        max-width: 100%;
        &:focus {
          outline: none;
        }
      }
    }

    &-enter,
    &-leave-to {
      opacity: 0;
    }
    &-leave-active {
        position: absolute;
    }

    &-desc {
      display: inline-block;
      width: 100%;
      margin-top: @veui-lightbox-content-spacing-y;
      font-size: @veui-lightbox-font-size;
      text-align: center;
      word-break: break-word;
      word-wrap: break-word;
      flex: 0 0 auto;
    }
  }

  &-control {
    position: absolute;
    &[ui] {
      &[ui~="translucent"] {
        min-width: auto;
      }
      .size(@veui-lightbox-control-size);
    }

    &,
    &[ui] {
      border-radius: @veui-lightbox-control-border-radius;
    }

    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-lightbox-control-icon-size);
    }

    &-prev {
      left: 0;

      .@{veui-prefix}-icon {
        transform: translateX(percentage(-(sqrt(2) - 1) / 2) / 2);
      }
    }
    &-next {
      right: 0;

      .@{veui-prefix}-icon {
        transform: translateX(percentage((sqrt(2) - 1) / 2) / 2);
      }
    }
  }

  &-indicator {
    &-numbers {
      font-variant-numeric: tabular-nums;
      cursor: default;
    }
  }
}