// GitHub Browser Modal Styles

.github-release-browser-browser
  &__loading,
  &__error,
  &__setup
    padding: 40px 20px 80px 20px
    text-align: center

    p
      color: var(--gh-rb-text-muted)

  &__error-message
    color: var(--gh-rb-error)
    margin-bottom: 10px

  &__setup
    max-width: 500px
    margin: 0 auto

  &__setup-title
    font-size: 18px
    font-weight: 600
    margin: 0 0 12px 0
    color: var(--gh-rb-text-primary)

  &__setup-message
    font-size: 14px
    line-height: 1.6
    color: var(--gh-rb-text-muted)
    margin: 0 0 24px 0

  &__setup-actions
    display: flex
    gap: 12px
    justify-content: center
    align-items: center

  &__footer
    position: fixed
    bottom: 0
    left: 0
    right: 0
    padding: 12px 16px
    border-top: 1px solid var(--gh-rb-border-divider)
    background-color: var(--gh-rb-bg-section)
    text-align: right
    z-index: 100
    display: flex
    justify-content: flex-end
    align-items: center
    gap: 10px

    .components-button
      font-weight: 500

    button
      font-weight: 500

  &__upgrade-link
    margin-left: 10px
    padding: 10px 16px !important
    background: color-mix(in srgb, var(--gh-rb-pro-accent) 5%, white) !important
    color: var(--gh-rb-pro-accent) !important
    border: 1px solid color-mix(in srgb, var(--gh-rb-pro-accent) 30%, white) !important
    border-radius: var(--gh-rb-radius-small) !important
    font-weight: 600 !important
    text-decoration: none !important
    transition: all 0.2s ease !important

    &:hover, &:focus
      background: color-mix(in srgb, var(--gh-rb-pro-accent) 10%, white) !important
      border-color: var(--gh-rb-pro-accent) !important
      color: var(--gh-rb-pro-accent) !important
      text-decoration: none !important

  &__main
    padding: 20px 20px 80px 20px
    max-width: 800px

  &__header
    display: flex
    align-items: center
    justify-content: space-between
    gap: 20px
    margin-bottom: 15px

    h2
      margin: 0

  &__controls
    display: flex
    align-items: center
    gap: 4px

  &__refresh-button
    min-width: auto !important
    padding: 4px !important

  &__search
    width: 100%
    max-width: 180px
    margin: 0

  &__no-results
    color: var(--gh-rb-text-muted)

  &__back-button
    margin-bottom: 15px