.circle-icon-button {
  --txt-color: rgba(17, 17, 17, 0.4);
  --bg-color: #fff;

  --bg-focus-color: rgba(0, 0, 0, 0.07);
  --bg-active-color: rgba(0, 0, 0, 0.11);
}

body.dark_theme .circle-icon-button {
  --txt-color: rgba(255, 255, 255, 0.5);
  --bg-color: #272727;

  --bg-focus-color: rgba(255, 255, 255, 0.14);
  --bg-active-color: rgba(255, 255, 255, 0.34);
}

.circle-icon-button {
  color: var(--txt-color);
  background-color: var(--bg-color);
}

a.circle-icon-button,
button.circle-icon-button {
  &:focus {
    > * {
      background-color: var(--bg-focus-color);
    }
  }

  &:active {
    > * {
      background-color: var(--bg-active-color);
    }
  }
}

.video-player .more-media {
  // In video player "More videos" section, use dark theme properties.

  a.circle-icon-button,
  button.circle-icon-button {
    &:focus {
      > * {
        background-color: rgba(0, 0, 0, 0.07);
      }
    }

    &:active {
      > * {
        background-color: rgba(0, 0, 0, 0.11);
      }
    }
  }
}

.circle-icon-button {
  display: block;
  padding: 0;

  width: 40px;
  height: 40px;

  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(#000, 0);
  -webkit-tap-highlight-color: transparent;

  outline-width: 0;
  border-width: 0;

  border-radius: 50%;

  > * {
    display: table;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    > * {
      display: table-cell;
      vertical-align: middle;
      border-radius: 50%;
    }
  }

  &.button-shadow {
    box-shadow: 0 4px 4px rgba(#000, 0.3), 0 0 4px rgba(#000, 0.2);
  }

  i {
    overflow: hidden;
  }
}