@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/colors";

/*
	Screen Options Tab
 */

$screen-options-icon-border-x: 5px;
$screen-options-icon-border-y: 7px;

.screen-options-tab {
	position: fixed;
	top: var(--masterbar-height);
	right: 32px;
	z-index: z-index("root", ".screen-options-tab");
}

.screen-options-tab__button {
	border: 1px solid var(--color-neutral-5);
	border-radius: 0 0 4px 4px;
	background-color: #fff;
	font-size: $default-font-size;
	padding: 3px 16px;
	color: $gray-700;
	cursor: pointer;
	line-height: 1.7;

	&:hover,
	&:focus-visible {
		color: var(--color-neutral-70);

		.screen-options-tab__icon {
			border-top-color: var(--color-neutral-70);
			border-bottom-color: var(--color-neutral-70);
		}
	}

	&:focus-visible {
		border-color: var(--color-primary-light);
		box-shadow: 0 0 3px var(--color-primary-light);
	}
}

.screen-options-tab__label {
	display: inline-block;
	margin-right: 7px;
}

.screen-options-tab__icon {
	border-left: $screen-options-icon-border-x solid transparent;
	border-right: $screen-options-icon-border-x solid transparent;
	display: inline-block;
	width: 0;
	height: 0;
}

.screen-options-tab__icon--closed {
	border-top: $screen-options-icon-border-y solid $gray-700;
}

.screen-options-tab__icon--open {
	border-bottom: $screen-options-icon-border-y solid $gray-700;
}

.screen-options-tab__wrapper {
	position: relative;
}

.screen-options-tab__dropdown {
	position: absolute;
	top: 5px;
	right: 0;
	padding: 3px;
	border: 1px solid var(--color-neutral-5);
	background-color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	width: 215px;
	border-radius: 4px;
}

/*
	Screen Switcher
 */

.screen-switcher:not(:hover) {
	// When the user isn't hover over one of the buttons let's highlight the first
	// because it is the Calypso option and its safe to assume they're in Calypso
	// if they are seeing this component.
	.screen-switcher__button:first-child {
		> strong {
			color: var(--color-accent);
		}
	}
}

.screen-switcher__button,
a.screen-switcher__button {
	cursor: pointer;
	border-radius: 4px;
	padding: 8px;
	text-align: left;
	border: 1px solid transparent;
	display: inline-block;
	font-size: $font-body-extra-small;
	color: var(--color-text);
	line-height: normal;

	// When the user sees this component they are going to be in Calypso
	// so it's safe to assume the Calypso option is always going to be active.
	&:first-child {
		margin-bottom: 4px;
		border-color: var(--color-accent);
	}

	&:last-child {
		margin-bottom: 0;
	}

	strong {
		display: block;
		font-size: $default-font-size;
		margin-bottom: 4px;
	}

	&:hover,
	&:focus {
		> strong {
			color: var(--color-accent);
		}
	}
}
