{"version":3,"sources":["webpack:///./src/components/DemoClasses/elements/index.js"],"names":["DescriptionText","textAlign","fontFamily","CharacterBoxBorder","borderColor","CharacterBox","src","FadeOutLink","DescriptionArea","Icon","margin","CharacterTitle","CharacterDescription","SkillsArea","SkillImage","SkillsDescription","MobileCharacterImage","minHeight","MobileItemsWrapper","MobileCharacterWrapper","PreviousArrow","NextArrow","PageIndicatorWrapper","AnimatedFlex","MobileDescriptionWrapper","MobileSkillsArea"],"mappings":"uzBAIO,IAAMA,EAAkB,4CAC3BC,YADwB,IAExBC,aAFwB,KAKfC,EAAqB,4CAAH,oTAgBlB,qBAAGC,cAhBe,gBAiBlB,qBAAGA,cAjBe,8EA8BlBC,EAAe,4CAAH,0CAEC,qBAAGC,MAFJ,wVA4BZC,EAAW,sNAgBXC,EAAkB,4CAAH,gLAefC,EAAO,4CAAH,kDAGS,qBAAGH,MAHZ,sDAMbI,SANa,KASJC,EAAc,oGAKvBV,YALuB,iOAyBdW,EAAoB,0GAI7BX,YAJ6B,qBAQpBY,EAAa,4CAAH,sKAeVC,EAAU,qGAKVC,EAAiB,iEAE1Bd,YAF0B,0DAWjBe,EAAuB,6CAChCC,YAD6B,0BAEP,qBAAGX,MAFI,uQAwBpBY,EAAqB,6CAAH,2DAKlBC,EAAyB,6CAAH,yDAKtBC,EAAgB,6CAAH,+PAebC,EAAY,6CAAH,+QAeTC,EAAuB,6CAAH,0GAOpBC,EAAe,6CAAH,+CAIZC,EAA2B,6CAAH,oFAUxBC,EAAmB,6CAAH","file":"2e74b70e-cbc2c2ccba73a392b5c9.js","sourcesContent":["import { Box, Flex } from '@square-enix-private/vaquita-ui';\nimport styled from '@emotion/styled';\nimport { minHeight, textAlign, margin, fontFamily } from 'styled-system';\n\nexport const DescriptionText = styled(Box)`\n  ${textAlign};\n  ${fontFamily};\n`;\n\nexport const CharacterBoxBorder = styled(Box)`\n  padding: 1px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s;\n  clip-path: polygon(91% 0, 100% 5%, 100% 100%, 0 100%, 0 0);\n  background: linear-gradient(\n    180deg,\n    rgba(45, 45, 45, 1) 0%,\n    rgba(45, 45, 45, 0) 100%\n  );\n\n  &.selected {\n    clip-path: polygon(96% 0, 100% 5%, 100% 100%, 0 100%, 0 0);\n    background: linear-gradient(\n      180deg,\n      rgba(${({ borderColor }) => borderColor}, 1) 0%,\n      rgba(${({ borderColor }) => borderColor}, 0) 100%\n    );\n  }\n\n  &:first-of-type {\n    margin-left: 0;\n  }\n\n  &:last-of-type {\n    margin-right: 0;\n  }\n`;\n\nexport const CharacterBox = styled(Box)`\n  min-height: 510px;\n  background-image: url(${({ src }) => src});\n  background-position: top center;\n  background-size: cover;\n  position: relative;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 190px;\n    background: linear-gradient(\n      0deg,\n      rgba(0, 0, 0, 1) 0%,\n      rgba(0, 0, 0, 0) 100%\n    );\n  }\n\n  clip-path: polygon(91% 0, 100% 5%, 100% 100%, 0 100%, 0 0);\n\n  &.selected {\n    clip-path: polygon(96% 0, 100% 5%, 100% 100%, 0 100%, 0 0);\n  }\n`;\n\nexport const FadeOutLink = styled.a`\n  outline: none;\n  height: 102px;\n  width: 164px;\n  position: absolute;\n  top: 15px;\n  left: 15px;\n  transition: all 0.3s;\n  opacity: 1;\n\n  &.hidden {\n    visibility: hidden;\n    opacity: 0;\n  }\n`;\n\nexport const DescriptionArea = styled(Box)`\n  width: 180px;\n  position: absolute;\n  bottom: 5px;\n  left: 50%;\n  transform: translate(-50%, 0);\n  transition: all 0.3s;\n\n  &.left {\n    left: 0;\n    transform: translate(0, 0);\n  }\n  z-index: 2;\n`;\n\nexport const Icon = styled(Box)`\n  width: 140px;\n  height: 148px;\n  background-image: url(${({ src }) => src});\n  background-position: center;\n  background-size: cover;\n  ${margin};\n`;\n\nexport const CharacterTitle = styled.h5`\n  margin: 0;\n  padding: 0;\n  font-size: 15px;\n  text-align: center;\n  ${textAlign};\n  text-transform: uppercase;\n  padding-bottom: 5px;\n  position: relative;\n\n  &::after {\n    content: '';\n    height: 2px;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: radial-gradient(\n      circle,\n      rgba(126, 126, 126, 1) 0%,\n      rgba(126, 126, 126, 0) 80%\n    );\n  }\n`;\n\nexport const CharacterDescription = styled.p`\n  color: rgba(173, 173, 173, 1);\n  font-size: 18px;\n  text-align: center;\n  ${textAlign};\n  margin: 5px auto;\n`;\n\nexport const SkillsArea = styled(Flex)`\n  position: absolute;\n  right: 0;\n  bottom: 10px;\n  z-index: 1;\n  transition: all 0.3s;\n  opacity: 1;\n  flex-direction: column;\n\n  &.hidden {\n    visibility: hidden;\n    opacity: 0;\n  }\n`;\n\nexport const SkillImage = styled.img`\n  max-width: 60px;\n  margin: 12px;\n`;\n\nexport const SkillsDescription = styled.p`\n  text-align: right;\n  ${textAlign};\n  font-size: 16px;\n  margin: 0;\n  margin-right: 12px;\n  color: #ccc;\n`;\n\n// MOBILE\n\nexport const MobileCharacterImage = styled(Box)`\n  ${minHeight};\n  background-image: url(${({ src }) => src});\n  background-position: center;\n  background-size: cover;\n  position: relative;\n  margin-bottom: -245px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 300px;\n    background: linear-gradient(\n      0deg,\n      rgba(0, 0, 0, 0.8) 0%,\n      rgba(0, 0, 0, 0.8) 50%,\n      rgba(0, 0, 0, 0) 100%\n    );\n  }\n`;\n\nexport const MobileItemsWrapper = styled(Flex)`\n  overflow: hidden;\n  max-width: 100vw;\n`;\n\nexport const MobileCharacterWrapper = styled(Box)`\n  width: 100vw;\n  position: relative;\n`;\n\nexport const PreviousArrow = styled(Box)`\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  transform: translate(0, -50%);\n  width: 29px;\n  height: 50px;\n  cursor: pointer;\n  z-index: 2;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/arrow-left.png');\n  background-size: 100%;\n`;\n\nexport const NextArrow = styled(Box)`\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  transform: translate(0, -50%) rotate(180deg);\n  width: 29px;\n  height: 50px;\n  cursor: pointer;\n  z-index: 2;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-image: url('/arrow-left.png');\n  background-size: 100%;\n`;\n\nexport const PageIndicatorWrapper = styled(Box)`\n  color: rgba(173, 173, 173, 1);\n  font-size: 16px;\n  text-align: center;\n  padding-bottom: 8px;\n`;\n\nexport const AnimatedFlex = styled(Flex)`\n  transition: all 0.3s;\n`;\n\nexport const MobileDescriptionWrapper = styled(Flex)`\n  max-width: 160px;\n  flex-direction: column;\n  align-items: center;\n`;\n\nexport const FlexWrapper = styled(Flex)`\n  position: relative;\n`;\n\nexport const MobileSkillsArea = styled(Flex)`\n  position: relative;\n  transition: all 0.3s;\n  opacity: 1;\n  flex-direction: column;\n`;\n"],"sourceRoot":""}