@custom-selector :--enter :hover, :focus;

.screenshot-toolbox {
	& button {
		margin: var(--toolbox-btn-gap);
	}

	& .btn {
		 position: relative;
		 padding: 0.2em 0.4em;;
		 overflow: hidden;
		 border-width: 0;
		 outline: none;
		 border-radius: 0.2em;
		 box-shadow: 0 0.1em 0.2em var(--color-darkgray);
		 background-color: var(--color-lightgray);
		 color: var(--color-darkgray);
		 transition: background-color .3s;
	}

	& .btn:--enter {
		background: var(--color-gray);
	}

	& .btn > * {
		position: relative;
	}

	& .btn:before {
		 content: "";
		 position: absolute;
		 top: 50%;
		 left: 50%;
		 display: block;
		 width: 0;
		 padding-top: 0;
		 border-radius: 100%;
		 background-color: var(--color-gray-opacity);
  		 -webkit-transform: translate(-50%, -50%);
  		 -moz-transform: translate(-50%, -50%);
  		 -ms-transform: translate(-50%, -50%);
  		 -o-transform: translate(-50%, -50%);
  		 transform: translate(-50%, -50%);
	}

	& .btn:active:before {
		width: 120%;
		padding-top: 120%;
		transition: width .2s ease-out, padding-top .2s ease-out;
	}

	& .btn-navy {
      background-color: var(--color-navy);
   }

   & .btn-navy:--enter {
      background-color: var(--color-darknavy);
   }
}

.screenshot-toolbox-custom {
	visibility: hidden;
}