/* The icon-only table action and its tooltip -- see app/helpers/icon_button_helper.rb. */

.icon-btn-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.icon-btn-wrap + .icon-btn-wrap { margin-left: var(--space-1); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.icon-btn:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.icon-btn--danger { color: var(--berry); }
.icon-btn--danger:hover { background: var(--berry); color: #fff; }

/* aria-disabled rather than the disabled attribute, so the control keeps its
   place in the tab order and the tooltip -- the one that says why -- can be
   reached at all. Taupe rather than the border grey: 4.4:1 on the white of a
   row against 1.7:1, and the control that exists in order to explain itself
   has to be seen before it can be asked. */
.icon-btn[aria-disabled="true"] {
  color: var(--taupe);
  cursor: not-allowed;
}

.icon-btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--taupe);
}

/* `button_to` renders a form, which is a block element and would drop the
   action onto a line of its own. */
.icon-btn__form {
  display: inline-flex;
  margin: 0;
}

/* The tooltip opens sideways and is centred on the button, so that it stays
   inside the table row. `.table-wrap` scrolls horizontally, and an element
   that scrolls on one axis clips on both -- a tooltip above or below the
   button would be cut off on the first and the last row of every table.
   Displayed rather than faded in: an absolutely positioned box still counts
   towards the scrollable area of its container even while invisible. */
.icon-btn__tip {
  display: none;
  position: absolute;
  top: 50%;
  right: calc(100% + var(--space-2));
  z-index: 3;
  transform: translateY(-50%);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

.icon-btn__tip--right {
  right: auto;
  left: calc(100% + var(--space-2));
}

.icon-btn-wrap:hover .icon-btn__tip,
.icon-btn-wrap:focus-within .icon-btn__tip { display: block; }

/* The tooltip lies over the cells to its left, so WCAG 1.4.13 asks for a way
   of getting rid of it that does not move the pointer or the focus. Escape
   sets the attribute (see app/javascript/icon_button.js); pointing or
   focusing somewhere else takes it off again. */
.icon-btn-wrap[data-tip-dismissed] .icon-btn__tip { display: none; }