import styled from '@emotion/styled';

import Button from '../button/Button';
import { GlassModule } from '../edit2025/components';

export const StudioGlassModule = styled(GlassModule)`
  border-radius: 20px;
`;

export const TransportButton = styled(Button)<{ holdable?: boolean }>`
  max-height: 32px;
  min-height: 32px;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  > span {
    gap: 4px;
  }
  ${({ holdable }) =>
    holdable
      ? `&:active {
    svg,
    .icon {
      transform: scale(1.3);
    }
  }`
      : ''}
  svg,
  .icon {
    width: 16px;
    height: 16px;
    transform: scale(1);
    transition: transform 0.2s ease-out;
  }
  &:hover {
    color: rgba(255, 255, 255, 1);
  }
`;