import { styled } from 'styleh-components';
export const DropdownContainer = styled.div.attrs({ className: 'dropdown-container' }) ``;
const animationSnapBackground = styled.keyframes `
  0% {
    background: transparent;
    color: var(--color-pure-white);
  }
  30% {
    margin-right: 1rem;
  }
  70% {
    margin-right: 0;
  }
  100% {
    background: var(--color-blue);
    color: var(--color-pure-white);
  }
`;
const hoverTitle = styled.css `
  animation-name: ${animationSnapBackground};
  svg {
    opacity: 0;
  }
`;
export const DropdownTitle = styled.div.attrs({ className: 'dropdown-title-container' }) `
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-medium);
  cursor: pointer;
  background: transparent;
  transition: background 0.48s, color 0.12s, padding 0.24s, margin 0.24s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.48s;
  animation-direction: alternate;
  animation-fill-mode: forwards;

  svg {
    opacity: 1;
  }

  ${(props) => props.isVisible && hoverTitle};
  &:hover {
    ${hoverTitle};
  }
`;
export const DropdownBodyElement = styled.div.attrs({
    className: 'dropdown-body-container',
}) `
  position: absolute;
  left: 20%;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 2;
  justify-content: space-between;
  width: calc(100% - 20%);
  display: flex;
  flex-direction: row;
  transition: opacity 0.24s;
  opacity: 1;

  ${(props) => props.isVisible === false &&
    styled.css `
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    `};
`;
//# sourceMappingURL=styled.js.map