// YouTube Search Component Styles
@import '../colors'

.search-group
  margin-bottom: 1.5rem
  
  .search-container
    position: relative
    margin-bottom: 1rem
    
    .search-input
      width: 100%
      padding: 0.75rem 2.5rem 0.75rem 1rem
      border-radius: 0.5rem
      background: rgba(255, 255, 255, 0.1)
      border: 1px solid rgba(255, 255, 255, 0.2)
      color: $text
      font-size: 1rem
      
      &:focus
        outline: none
        border-color: $primary
        box-shadow: 0 0 0 3px rgba($primary, 0.3)
    
    .spinner-icon, .clear-icon
      position: absolute
      top: 50%
      right: 1rem
      transform: translateY(-50%)
      color: $text-muted
      
    .clear-icon
      cursor: pointer
      &:hover
        color: $text

  .selected-video
    background: rgba($card-bg, 0.6)
    border-radius: 0.75rem
    padding: 1rem
    margin-bottom: 1.5rem
    border: 1px solid rgba($primary, 0.3)
    
    .preview-header
      display: flex
      justify-content: space-between
      align-items: center
      margin-bottom: 0.75rem
      
      h4
        margin: 0
        color: $primary
        
      .preview-toggle
        background: transparent
        border: none
        color: $secondary
        cursor: pointer
        padding: 0.25rem 0.5rem
        border-radius: 0.25rem
        font-size: 0.85rem
        
        &:hover
          background: rgba($secondary, 0.15)
    
    .video-details
      display: flex
      gap: 1rem
      margin-bottom: 1rem
      
      .selected-thumbnail
        width: 120px
        height: 90px
        object-fit: cover
        border-radius: 0.25rem
        
      .selected-info
        display: flex
        flex-direction: column
        justify-content: center
        
        h4
          margin: 0 0 0.25rem 0
          font-size: 1rem
          
        p
          margin: 0
          color: $text-muted
          font-size: 0.9rem
          
    .video-preview
      position: relative
      padding-bottom: 56.25% // 16:9 aspect ratio
      height: 0
      overflow: hidden
      border-radius: 0.5rem
      margin-top: 1rem
      
      iframe
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        border-radius: 0.5rem
        
  .search-results
    background: rgba($card-bg, 0.6)
    border-radius: 0.75rem
    padding: 1rem
    max-height: 400px
    overflow-y: auto
    
    h4
      margin-top: 0
      margin-bottom: 0.75rem
      color: $primary
      font-size: 0.9rem
      text-transform: uppercase
      letter-spacing: 0.05em
      
    .search-result
      display: flex
      padding: 0.75rem
      border-radius: 0.5rem
      gap: 1rem
      cursor: pointer
      transition: background-color 0.2s ease
      margin-bottom: 0.5rem
      
      &:hover
        background-color: rgba(255, 255, 255, 0.05)
        
      &.selected
        background-color: rgba($primary, 0.15)
        border-left: 3px solid $primary
        
      .result-thumbnail-container
        position: relative
        width: 120px
        flex-shrink: 0
        
        .result-thumbnail
          width: 120px
          height: 68px
          object-fit: cover
          border-radius: 0.25rem
          
        .preview-button
          position: absolute
          right: 0.25rem
          bottom: 0.25rem
          background: rgba(0, 0, 0, 0.6)
          border: none
          color: white
          width: 24px
          height: 24px
          border-radius: 50%
          display: flex
          align-items: center
          justify-content: center
          opacity: 0.7
          cursor: pointer
          
          &:hover
            opacity: 1
            background: rgba($secondary, 0.8)
            
      .result-info
        flex-grow: 1
        
        h4
          margin: 0 0 0.25rem 0
          font-size: 0.95rem
          text-transform: none
          letter-spacing: normal
          
        p
          margin: 0
          color: $text-muted
          font-size: 0.85rem