How to use @tinacms/styles - 10 common examples

transform: translate3d( 0, -2rem, 0 );
    opacity: 0;
  }

  100% {
    transform: translate3d( 0, 0, 0 );
    opacity: 1;
  }
`

export const ModalPopup: StyledComponent<'div', {}, {}> = styled.div`
  display: block;
  z-index: 1;
  overflow: visible; /* Keep this as "visible", select component needs to overflow */
  background-color: #f6f6f9;
  border-radius: ${radius('small')};
  margin: 2.5rem auto;
  width: 460px;
  max-width: 90%;
  animation: ${ModalPopupKeyframes} 150ms ease-out 1;
`

transform: translate3d( 0, -2rem, 0 );
    opacity: 0;
  }

  100% {
    transform: translate3d( 0, 0, 0 );
    opacity: 1;
  }
`

export const ModalPopup = styled.div`
  display: block;
  z-index: 1;
  overflow: visible; /* Keep this as "visible", select component needs to overflow */
  background-color: #f6f6f9;
  border-radius: ${radius('small')};
  margin: 2.5rem auto;
  width: 460px;
  max-width: 90%;
  animation: ${ModalPopupKeyframes} 150ms ease-out 1;
`

border: 1px solid ${color.grey(2)};
  margin: 0 0 -1px 0;
  overflow: visible;
  line-height: 1.35;
  padding: 0;
  font-size: ${font.size(2)};
  font-weight: 500;

  ${GroupLabel} {
    color: #282828;
    align-self: center;
    max-width: 100%;
  }

  svg {
    fill: ${color.grey(3)};
    width: 1.25rem;
    height: auto;
    transition: fill 85ms ease-out;
  }

  &:hover {
    svg {
      fill: ${color.grey(8)};
    }
    ${GroupLabel} {
      color: #0084ff;
    }
  }

  &:first-child {
    border-radius: 0.25rem 0.25rem 0 0;

fill: ${color.grey(8)};
    }
    color: #0084ff;
  }
`

export const PanelHeader = styled(Header)`
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  background-color: white;
  justify-content: flex-start;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid ${color.grey(2)};
  margin: 0;
  padding: 0.75rem 1.25rem;

  span {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  svg {
    flex: 0 0 auto;
    transform: translate3d(-4px, 0, 0);
  }

  &:hover {

fill: ${color.primary()};
    }
    & ~ * {
      &:after {
        transform: translate3d(0, -100%, 0);
      }
    }
  }
  svg {
    position: absolute;
    left: ${padding()};
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 2.25rem;
    height: auto;
    fill: ${color.grey(4)};
    transition: all ${timing('short')} ease-out;
  }
`

const SidebarHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1050;
  flex: 0 0 ${SIDEBAR_HEADER_HEIGHT}rem;
  height: ${SIDEBAR_HEADER_HEIGHT}rem;
  width: 100%;
  padding: 0 ${padding()};
`

const MenuToggle = styled.button<{ open: boolean }>`

const ResetButton = styled(Button)`
  flex: 0 0 6rem;
`

const CloseButton = styled.div`
  display: flex;
  align-items: center;
  fill: ${color.grey(3)};
  cursor: pointer;
  transition: fill 85ms ease-out;
  svg {
    width: 1.5rem;
    height: auto;
  }
  &:hover {
    fill: ${color.grey(8)};
  }
`

}

  &:hover {
    background-color: #f6f6f9;
    cursor: grab;

    ${ItemLabel} {
      color: #0084ff;
    }
    ${DeleteButton} {
      svg {
        fill: ${color.grey(4)};
      }
      &:hover {
        svg {
          fill: ${color.grey(8)};
        }
      }
    }
    ${DragHandle} {
      svg {
        fill: ${color.grey(8)};
      }
      svg:first-child {
        opacity: 0;
      }
      svg:last-child {
        opacity: 1;
      }
    }
  }

width: 2.5rem;
  background-color: transparent;
  background-position: center;
  background-size: auto 1.125rem;
  background-repeat: no-repeat;
  border: 0;
  margin: 0 -1rem 0 0.5rem;
  outline: none;
  cursor: pointer;
  transition: opacity 85ms ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: #f6f6f9;
    fill: ${color.grey(8)};
  }
`

const ActionsOverlay = styled.div<{ open: boolean }>`
  min-width: 12rem;
  border-radius: ${radius()};
  border: 1px solid #efefef;
  display: block;
  position: absolute;
  bottom: ${padding()};
  right: ${padding()};
  transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
  opacity: 0;
  pointer-events: none;
  transition: all 85ms ease-out;
  transform-origin: 100% 100%;

color: inherit;
  padding: 0;
  opacity: ${props => (props.disabled ? '0.4' : '1')};
  outline: none;
  width: 3rem;
  height: 1.75rem;
  pointer-events: ${props => (props.disabled ? 'none' : 'inherit')};
`

const ToggleSwitch = styled.div<{ checked: boolean }>`
  position: relative;
  width: 3rem;
  height: 1.75rem;
  border-radius: ${radius()};
  background-color: white;
  border: 1px solid ${color.grey(2)};
  pointer-events: none;
  margin-left: -2px;
  span {
    position: absolute;
    border-radius: ${radius()};
    left: 2px;
    top: 50%;
    width: calc(1.75rem - 6px);
    height: calc(1.75rem - 6px);
    background: ${p => (p.checked ? color.primary() : color.grey(3))};
    transform: translate3d(${p => (p.checked ? '1.25rem' : '0')}, -50%, 0);
    transition: all 150ms ease-out;
  }
`

const ToggleInput = styled.input`

width: 100%;
  margin: 0;
  outline: none;
  box-shadow: 0 0 0 2px ${p => (p.error ? color.error() : 'transparent')};

  &:hover {
    box-shadow: 0 0 0 2px ${color.grey(3)};
  }

  &:focus {
    box-shadow: 0 0 0 2px ${p => (p.error ? color.error() : color.primary())};
  }

  &::placeholder {
    font-size: ${font.size(2)};
    color: ${color.grey(3)};
  }

  ${p =>
    p.small &&
    css`
      font-size: ${font.size(1)};
      padding: 0.5rem ${padding('small')};
    `};
`

export const Input = styled.input`
  ${InputCss}
`