import styled from 'styled-components';

const Carouseld = styled.div`
  height: 100%;
  .ant-carousel .slid .slick-dots li button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
  }
  .ant-carousel .slid .slick-dots .slick-active button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
  }
  .ant-carousel .slick-dots li.slick-active:hover,
  .ant-carousel .slick-dots li.slick-active:focus {
    width: 16px;
  }
  .ant-carousel .slick-dots li.slick-active {
    width: 16px;
  }
  .slick-initialized {
    height: 100%;
  }
  .slick-track {
    height: 100%;
  }
  .slick-slide > div {
    height: 100%;
  }
  .fill1 {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    img {
      width: 100%;
    }
  }
  .fill2 {
    height: 100%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .center {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    background: rgba(0, 0, 0, 0.6);
    padding-left: 5px;
    color: white;
  }
`;

export { Carouseld };