import styled from 'styled-components'
import { IGallerySlider } from './GallerySlider.interface'
import { colors } from '../../../styles/variables'
import { CSSProperties } from 'react'

interface StyledIconBox {
  disabled: boolean
}
export const StyledIconBox = styled.div<StyledIconBox>`
  padding: 8px;
  border: 1px solid transparent;

  i {
    color: ${props => (props?.disabled ? colors.white : colors.gray70)};
  }
  /* background-image: linear-gradient(${colors.white}, ${colors.gray90});
  background-size: 100% 0%;
  background-repeat: no-repeat; */

  transition: 400ms;
  color: ${props => (props?.disabled ? colors.white : colors.gray70)};
  cursor: ${props => (props?.disabled ? 'pointer' : 'none')};
  &:hover {
    cursor: ${props => (props?.disabled ? 'pointer' : 'none')};
    border-bottom: ${props =>
      props?.disabled ? '1px solid white' : '1px solid transparent'};

    /* background-color: ${colors.gray90};
    border-color: ${colors.gray90};
    color: ${colors.white};

    background-size: 100% 100%; // to animation */
  }
`

export const StyledGallerySlider = styled.div`
  background-color: ${colors.gray90};
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 2s;
  height: 500px;
  padding: 1rem;

  .images {
    display: flex;
    overflow: hidden;
    height: 100%;
    /* gap: 16px; */

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .images div {
    height: 100%;
    transition: width 0.5s ease-in-out;
  }

  .controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: 400ms;
    .bar {
      transition: 400ms;
      display: flex;
      width: 100%;
      border: 1px solid ${colors.gray70};

      margin: 16px 0;
      border-radius: 24px;

      @media only screen and (max-width: 400px) {
        width: 0%;
        margin: 0;
        border: 0;
      }
    }
  }
`