Untitled

import styled, { css } from "styled-components";
import { mixins } from "@/app/styles/mixins";

// Common styles that are reused
const flexStyles = css`
  ${mixins.Flex({ justify: "space-between", align: "flex-start" })};
`;

const transitionStyles = css`
  transition: min-height 0.3s linear;
`;

const hoverActiveStyles = css`
  background: var(--theme-button-secondary-hover);
  min-height: ${mixins.PxToRem(65)};
  ${transitionStyles}

  .transcript-actions {
    display: block;
  }
  
  .time {
    display: none;
  }
`;

// Main exported styles
export const s = {
  liTranscript: styled.li`
    ${flexStyles}
    line-height: ${mixins.PxToRem(21)};
    white-space: pre-line;
    word-wrap: break-word;
    padding: ${mixins.PxToRem(13)} ${mixins.PxToRem(20)};
    border-radius: ${mixins.PxToRem(8)};
    margin: ${mixins.PxToRem(2)} ${mixins.PxToRem(2)} 0 ${mixins.PxToRem(2)};
    position: relative;
    min-height: auto;
    ${transitionStyles}
    
    @media (min-width: 993px) {
      padding: ${mixins.PxToRem(14)} ${mixins.PxToRem(12)};
    }
    
    &:hover,
    &:focus,
    &:focus-within,
    &.active {
      ${hoverActiveStyles}
    }
    
    .transcript-actions {
      display: none;
    }
    
    .btn-action {
      ${mixins.Flex({ justify: "center", align: "center" })};
    }
  `,
  
  spanTranscriptText: styled.span`
    display: block;
    padding-right: ${mixins.PxToRem(55)};
    white-space: pre-line;
    word-break: break-word;
    
    .highlighted-text {
      position: relative;
      display: inline;
      background: rgba(168, 153, 255, 0.3);
      border-radius: ${mixins.PxToRem(4)};
    }
  `,
  
  spanTime: styled.span`
    color: var(--theme-text-secondary-normal);
    padding: ${mixins.PxToRem(6)} 0 0 ${mixins.PxToRem(10)};
    ${mixins.Flex({ content: "flex-end" })};
    flex: 0 0 auto;
  `,
  
  divTranscriptEdit: styled.div`
    ${mixins.Flex({ dir: "column", justify: "flex-start", align: "flex-start" })};
    width: 100%;
  `,
  
  divTranscriptEditCount: styled.div`
    color: ${({ theme }) => theme.colors.text.tertiary};
    
    .error {
      color: ${({ theme }) => theme.colors.text.red};
    }
  `,
  
  divControls: styled.div`
    ${mixins.Position({
      position: "absolute",
      right: mixins.PxToRem(8),
      top: mixins.PxToRem(4),
      bottom: mixins.PxToRem(0)
    })};
  `
};