/* ------------------------------------------------------------ *\
	Buttons
\* ------------------------------------------------------------ */

.carbon-button { position: relative; float: left; }

.carbon-button ul { display: none; position: absolute; z-index: 9999; left: 100%; top: 50%; min-width: 180px; margin: 0; background: $color-label; border-radius: 3px; transform: translate(10px, -50%); }
.carbon-button ul:before { content: ''; position: absolute; right: 100%; top: 50%; margin-top: -5px; border-width: 5px 5px 5px 0; border-style: solid; border-color: transparent $color-label; }

.carbon-button li { margin: 0; }

.carbon-button li a { display: block; padding: 8px 10px; font-size: 12px; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; color: #fff; box-shadow: none; }
.carbon-button li a:hover { background: $color-border-darkgrey; }
.carbon-button li a:focus { outline: none; box-shadow: none; }

.carbon-button li ~ li { border-top: 1px solid $color-border-darkgrey; }
.carbon-button li ~ li a { padding-top: 7px; }
.carbon-button li:first-child a { border-radius: 3px 3px 0 0; }
.carbon-button li:last-child a { border-radius: 0 0 3px 3px; }

/*  Right-to-Left  */
.rtl .carbon-button ul { left: auto; right: 100%; transform: translate(-10px, -50%); }
.rtl .carbon-button ul:before { right: auto; left: 100%; border-width: 5px 0 5px 5px; }


/* ------------------------------------------------------------ *\
	Icon Button
\* ------------------------------------------------------------ */

.carbon-field .icon-button { width: 28px; height: 28px; padding: 0; margin-left: 6px; font-size: 0; line-height: 0; text-align: center; vertical-align: top !important; font-family: inherit; }

.carbon-field .icon-button:before { vertical-align: top; font-family: 'dashicons'; font-weight: normal; font-size: 22px; line-height: 1.2; speak: none; text-transform: none; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }