// Directory Browsing Styles

// ====================================
// Source Mode Toggle
// ====================================
.github-release-browser-source-toggle
	margin-bottom: 20px

	&__control
		width: 100%

// ====================================
// Directory View Container
// ====================================
.github-release-browser-directory-view
	padding: 20px 20px 80px 20px
	max-width: 800px

	.github-release-browser-browser__header
		margin-bottom: 20px

		h2
			font-size: var(--gh-rb-font-size-heading)
			font-weight: 600
			margin: 0

// ====================================
// Branch Selector
// ====================================
.github-release-browser-branch-selector
	margin-bottom: 20px

	.components-base-control
		margin-bottom: 0

	.components-base-control__label
		font-weight: 600
		font-size: var(--gh-rb-font-size-normal)
		color: var(--gh-rb-text-primary)
		margin-bottom: 8px
		text-transform: uppercase
		letter-spacing: 0.5px
		font-size: 11px

	.components-select-control__input
		font-size: var(--gh-rb-font-size-normal)

// ====================================
// Directory Browser
// ====================================
.github-release-browser-directory
	&__breadcrumb
		display: flex
		align-items: center
		margin-bottom: 20px
		padding: 12px 16px
		background: var(--gh-rb-bg-section)
		border-radius: var(--gh-rb-radius-medium)
		font-size: var(--gh-rb-font-size-normal)
		gap: 4px

	&__breadcrumb-item
		background: none
		border: none
		padding: 4px 6px
		color: var(--gh-rb-accent)
		cursor: pointer
		font-size: inherit
		font-family: inherit
		text-decoration: none
		transition: all var(--gh-rb-transition-fast)
		border-radius: var(--gh-rb-radius-small)
		font-weight: 500

		&:hover
			background: var(--gh-rb-accent-bg)
			color: var(--gh-rb-accent)

	&__breadcrumb-separator
		color: var(--gh-rb-text-muted)
		user-select: none

	&__loading
		padding: 20px
		text-align: center

	&__list
		margin-top: 10px

	&__item
		margin-bottom: 10px
		background-color: var(--gh-rb-bg-white)
		box-shadow: none
		border-radius: var(--gh-rb-radius-large)
		cursor: pointer
		outline: none
		transition: box-shadow var(--gh-rb-transition-normal), background-color var(--gh-rb-transition-normal)

		.components-card__body
			padding: 12px 16px

	&__item-content
		display: flex
		align-items: center
		gap: 10px
		width: 100%

	&__item_folder
		&:hover:not(.github-release-browser-directory__item_selected)
			box-shadow: var(--gh-rb-accent) 0px 0px 0px 1px

	&__item_selected
		box-shadow: var(--gh-rb-accent) 0px 0px 0px 1px
		background-color: var(--gh-rb-accent-bg)

	&__radio
		flex-shrink: 0
		margin: 0 4px 0 0
		cursor: pointer
		accent-color: var(--gh-rb-accent)

	&__icon
		flex-shrink: 0
		color: var(--gh-rb-text-muted)
		margin-right: 4px

	&__name
		flex: 1
		background: none
		border: none
		text-align: left
		padding: 0
		font-family: inherit
		font-size: var(--gh-rb-font-size-large)
		color: var(--gh-rb-text-primary)
		cursor: pointer
		font-weight: 600
		line-height: 1.4

	&__empty
		color: var(--gh-rb-text-muted)
		padding: 40px 20px
		text-align: center
		font-size: var(--gh-rb-font-size-normal)