@use '../../../variables' as *;

.#{$prefix}theme-centurion {
	.#{$prefix}nav-rail {
		--#{$prefix}nav-rail-border-color: var(--#{$prefix}border-color);

		--#{$prefix}nav-rail-start-content-padding-y: 8px;
		--#{$prefix}nav-rail-start-content-gap: 8px;

		--#{$prefix}nav-rail-content-padding-y: 8px;
		--#{$prefix}nav-rail-content-gap: 8px;

		--#{$prefix}nav-rail-end-content-padding-y: 8px;
		--#{$prefix}nav-rail-end-content-gap: 8px;

		width: 56px;

		& > .#{$prefix}surface {
			z-index: 0;
			--#{$prefix}surface-color: #f8f8f8;;
			--#{$prefix}surface-opacity: 1;
		}

		&-item {
			--#{$prefix}nav-rail-item-border-radius: 6px;
			--#{$prefix}nav-rail-item-gap: 12px;

			--#{$prefix}nav-rail-item-padding-y: 16px;

			--#{$prefix}nav-rail-item-label-font-size: 11px;
			--#{$prefix}nav-rail-item-label-font-weight: 500;
			--#{$prefix}nav-rail-item-label-line-height: 16px;

			--#{$prefix}nav-rail-item-indicator-size: 4px;
			--#{$prefix}nav-rail-item-indicator-border-radius: 4px;
			--#{$prefix}nav-rail-item-indicator-color: currentColor;

			--#{$prefix}nav-rail-item-media-width: 48px;
			--#{$prefix}nav-rail-item-media-height: 48px;
			--#{$prefix}nav-rail-item-media-border-radius: 16px;

			--#{$prefix}nav-rail-item-icon-font-size: 24px;

			--#{$prefix}nav-rail-item-color: var(--#{$prefix}secondary-action-color);

			--#{$prefix}_active-nav-rail-item-color: #000;
			--#{$prefix}_active-nav-rail-item-indicator-color: var(--#{$prefix}primary-color);

			& > .#{$prefix}surface {
				--#{$prefix}surface-opacity: 0;
			}

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-opacity: 0;
			}

			&__icon,
			&__media {
				& > .#{$prefix}overlay {
					--#{$prefix}overlay-opacity: 0;
				}
			}
		}
	}
}