import styled from 'styled-components';

const css = styled.div;

export const Container = css<any>`
   background: #222;
   height: ${(p) => p.height};
   width: ${(p) => p.width};
   position: relative;
   transition: 0.3s all;
   overflow: hidden;
   //user-select: none;

   .overlay {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      cursor: pointer;
   }

   .full-screen-slider {
      transition: transform 300ms ease-in-out;
   }

   .slide-media-fullscreen--close-mobile {
      position: fixed;
      right: 5px;
      top: 5px;
      width: 40px;
      height: 40px;
      z-index: 200;
      border-radius: 300px;
      background: rgba(0, 0, 0, 0.6);
      padding: 7px;
      line-height: 0px;
   }

   .image-count {
      -webkit-transform: translateX(-50%);
      bottom: 10px;
      color: #fff;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      z-index: 4;
      background: #000;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: bold;

      ${(p) =>
         p.boxCountPos === 'top-left' &&
         `
            left: 10px;
            top: 10px;
            right: auto;
            bottom: auto;
            transform: translateX(0);
         `}

      ${(p) =>
         p.boxCountPos === 'top-center' &&
         `
            left: 50%;
            top: 10px;
            right: auto;
            bottom: auto;
            transform: translateX(-50%);
         `}

      ${(p) =>
         p.boxCountPos === 'top-right' &&
         `
            right: 10px;
            top: 10px;
            left: auto;
            bottom: auto;
            transform: translateX(0);
         `}

      ${(p) =>
         p.boxCountPos === 'bottom-left' &&
         `
            left: 10px;
            bottom: 10px;
            right: auto;
            top: auto;
            transform: translateX(0);
         `}

      ${(p) =>
         p.boxCountPos === 'bottom-center' &&
         `
            left: 50%;
            bottom: 10px;
            right: auto;
            top: auto;
            transform: translateX(-50%);
         `}

      ${(p) =>
         p.boxCountPos === 'bottom-right' &&
         `
            right: 10px;
            bottom: 10px;
            left: auto;
            top: auto;
            transform: translateX(0);
         `}
   }

   .main {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      z-index: 2;
   }

   ul {
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      white-space: nowrap;
      width: 100%;

      li {
         display: inline-block;
         height: 100%;
         list-style: none;
         margin: 0;
         padding: 0;
         position: relative;
         width: 100%;

         img {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
            z-index: 2;
            cursor: pointer;
         }
      }
   }

   .slider-image {
      background: transparent;
      cursor: pointer;
      height: 100%;
      overflow: hidden;
      position: relative;
      width: 100%;

      img {
         max-height: 90%;
         max-width: 1200px;
         width: 100%;
         z-index: 2;

         &.rot0 {
            transform: translate(-50%, -50%) rotateZ(0deg);
         }

         &.rot90 {
            transform: translate(-50%, -50%) rotateZ(90deg);
         }

         &.rot180 {
            transform: translate(-50%, -50%) rotateZ(180deg);
         }

         &.rot270 {
            transform: translate(-50%, -50%) rotateZ(270deg);
         }
      }
   }

   .arrow {
      background: rgba(0, 0, 0, 0.8);
      border-radius: 0;
      color: #fff;
      cursor: pointer;
      font-size: ${(p) => (p.arrowSize / 60) * 22}px;
      height: ${(p) => p.arrowSize * 1.4}px;
      line-height: ${(p) => p.arrowSize * 1.4}px;
      width: ${(p) => p.arrowSize}px;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-50%) scale(1);
      z-index: 10;

      &.disabled {
         opacity: 0.2;
      }

      &.left {
         left: 0;
         z-index: 100;
      }

      &.right {
         right: 0;
         z-index: 100;
      }
   }
`;
