:root {
  --zd-table__row__cell__overflow-background-image: svg-load('16/overflow-stroke.svg', color: var(--zd-color-grey-600));
  --zd-table__row__cell__overflow-size: 2em;
  --zd-table__row__cell__overflow-margin-top: calc(calc(var(--zd-table__row-height) / 2) - 1em);
  --zd-table__row__cell__overflow-transition:
    opacity .25s ease-in-out,
    background-color .1s ease-in-out;
  --zd-table__row__cell__overflow-focused-background-color: color-mod(var(--zd-color-grey-600) alpha(35%));
  --zd-table__row__cell__overflow-hovered-background-image: svg-load('16/overflow-stroke.svg', color: var(--zd-color-grey-800));
  --zd-table__row--header__cell__overflow-margin-bottom: calc(calc(var(--zd-table__row--header-height) / 2) - 1em);
  --zd-table--lg__row__cell__overflow-margin-top: calc(calc(var(--zd-table--lg__row-height) / 2) - 1em);
  --zd-table--sm__row__cell__overflow-margin-top: calc(calc(var(--zd-table--sm__row-height) / 2) - 1em);
  --zd-table--lg__row--header__cell__overflow-margin-bottom: calc(calc(var(--zd-table--lg__row--header-height) / 2) - 1em);
  --zd-table--sm__row--header__cell__overflow-margin-bottom: calc(calc(var(--zd-table--sm__row--header-height) / 2) - 1em);
  --zd-table__row__cell--overflow__menu-top: calc(var(--zd-table__row__cell__overflow-size) + 1px);
}

.c-table__row__cell--overflow {
  padding: 0;
  width: 2em;
  height: inherit;
}

/* 1. Reset for <button> element.
 * 2. Reset for <a>nchor element.  */
.c-table__row__cell__overflow {
  display: block;
  position: relative;
  transition: var(--zd-table__row__cell__overflow-transition);
  z-index: 0;
  margin-top: var(--zd-table__row__cell__overflow-margin-top);
  border: none; /* [1] */
  background-color: transparent; /* [1] */
  cursor: pointer;
  padding: 0; /* [1] */
  width: 100%;
  height: var(--zd-table__row__cell__overflow-size);
  text-decoration: none; /* [2] */
  font-size: inherit; /* [1] */
}

.c-table__row__cell__overflow::before,
.c-table__row__cell__overflow::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(90deg);
  transition: var(--zd-table__row__cell__overflow-transition);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  width: var(--zd-table__row__cell__overflow-size);
  height: var(--zd-table__row__cell__overflow-size);
  content: '';
}

.c-table__row__cell__overflow::before {
  background-image: var(--zd-table__row__cell__overflow-background-image);
}

.c-table__row__cell__overflow::after {
  opacity: 0;
  background-image: var(--zd-table__row__cell__overflow-hovered-background-image);
}

.c-table__row--header .c-table__row__cell__overflow {
  margin-top: 0;
  margin-bottom: var(--zd-table__row--header__cell__overflow-margin-bottom);
}

.c-table--lg .c-table__row__cell__overflow {
  margin-top: var(--zd-table--lg__row__cell__overflow-margin-top);
}

.c-table--sm .c-table__row__cell__overflow {
  margin-top: var(--zd-table--sm__row__cell__overflow-margin-top);
}

@custom-selector :--table__row__cell__overflow-hovered
  .is-hovered,
  .is-focused,
  .is-active,
  :hover;

.c-table__row__cell__overflow:--table__row__cell__overflow-hovered::before {
  opacity: 0;
}

.c-table__row__cell__overflow:--table__row__cell__overflow-hovered::after {
  opacity: 1;
}

.c-table__row__cell__overflow:focus {
  outline: none;
}

@custom-selector :--table__row__cell__overflow-focused
  .is-focused;

.c-table__row__cell__overflow:--table__row__cell__overflow-focused::before,
.c-table__row__cell__overflow:--table__row__cell__overflow-focused::after {
  background-color: var(--zd-table__row__cell__overflow-focused-background-color);
}

.c-table__row__cell__overflow.is-active {
  z-index: 1;
}

.c-table__row:--table__row-hovered .c-table__row__cell__overflow,
.c-table__row:--table__row-focused .c-table__row__cell__overflow,
.c-table__row__cell__overflow.is-active {
  opacity: 1;
}

.c-table__row:not(.c-table__row--header) .c-table__row__cell__overflow {
  opacity: 0;
}

.c-table--lg .c-table__row--header .c-table__row__cell__overflow {
  margin-top: 0;
  margin-bottom: var(--zd-table--lg__row--header__cell__overflow-margin-bottom);
}

.c-table--sm .c-table__row--header .c-table__row__cell__overflow {
  margin-top: 0;
  margin-bottom: var(--zd-table--sm__row--header__cell__overflow-margin-bottom);
}

.c-table__row__cell--overflow .c-menu {
  top: var(--zd-table__row__cell--overflow__menu-top);
  right: calc(100% - var(--zd-table__row__cell__overflow-size));
}